How to increase the width of a carousel without changing the responsiveness of an website
0
I used the width property in
carouselExampleControls
width:1400px;
left:-270px;
but the entire size of the website is changing. as shown in figure I need this full website width carouselI need to increase the width of the carousel only.
pasting my entire code here:
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
body
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
.content
padding: 16px;
::-webkit-scrollbar
display: none;
.content
width:1000px;
margin:0 auto;
carouselExampleControls
.card
border:none;
.card-body
font-family: ProximaNova-Semibold,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #4a4a4a;
h2
display: block;
font-size:30px;
margin-block-start:40px;
margin-block-end:20px;
margin-inline-start:0px;
margin-inline-end: 0px;
font-weight:bold;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
.slide-box img
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 45%;
padding-left:20px;
.slide-box
justify-content: space-between;
Link
Link
Disabled
Mains
Meals on offer
Biriyanis
Appetisers
Fit N Fab
Previous
Next
Mains
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Biriyanis
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Appetisers
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
html css
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
add a comment |
0
I used the width property in
carouselExampleControls
width:1400px;
left:-270px;
but the entire size of the website is changing. as shown in figure I need this full website width carouselI need to increase the width of the carousel only.
pasting my entire code here:
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
body
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
.content
padding: 16px;
::-webkit-scrollbar
display: none;
.content
width:1000px;
margin:0 auto;
carouselExampleControls
.card
border:none;
.card-body
font-family: ProximaNova-Semibold,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #4a4a4a;
h2
display: block;
font-size:30px;
margin-block-start:40px;
margin-block-end:20px;
margin-inline-start:0px;
margin-inline-end: 0px;
font-weight:bold;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
.slide-box img
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 45%;
padding-left:20px;
.slide-box
justify-content: space-between;
Link
Link
Disabled
Mains
Meals on offer
Biriyanis
Appetisers
Fit N Fab
Previous
Next
Mains
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Biriyanis
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Appetisers
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
html css
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
Just give the Carousel awidth: 100vw
– Badgy
Nov 14 '18 at 7:28
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34
add a comment |
0
0
0
I used the width property in
carouselExampleControls
width:1400px;
left:-270px;
but the entire size of the website is changing. as shown in figure I need this full website width carouselI need to increase the width of the carousel only.
pasting my entire code here:
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
body
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
.content
padding: 16px;
::-webkit-scrollbar
display: none;
.content
width:1000px;
margin:0 auto;
carouselExampleControls
.card
border:none;
.card-body
font-family: ProximaNova-Semibold,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #4a4a4a;
h2
display: block;
font-size:30px;
margin-block-start:40px;
margin-block-end:20px;
margin-inline-start:0px;
margin-inline-end: 0px;
font-weight:bold;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
.slide-box img
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 45%;
padding-left:20px;
.slide-box
justify-content: space-between;
Link
Link
Disabled
Mains
Meals on offer
Biriyanis
Appetisers
Fit N Fab
Previous
Next
Mains
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Biriyanis
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Appetisers
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
html css
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
I used the width property in
carouselExampleControls
width:1400px;
left:-270px;
but the entire size of the website is changing. as shown in figure I need this full website width carouselI need to increase the width of the carousel only.
pasting my entire code here:
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
body
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
.content
padding: 16px;
::-webkit-scrollbar
display: none;
.content
width:1000px;
margin:0 auto;
carouselExampleControls
.card
border:none;
.card-body
font-family: ProximaNova-Semibold,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #4a4a4a;
h2
display: block;
font-size:30px;
margin-block-start:40px;
margin-block-end:20px;
margin-inline-start:0px;
margin-inline-end: 0px;
font-weight:bold;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
.slide-box img
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 45%;
padding-left:20px;
.slide-box
justify-content: space-between;
Link
Link
Disabled
Mains
Meals on offer
Biriyanis
Appetisers
Fit N Fab
Previous
Next
Mains
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Biriyanis
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
Appetisers
Thai Minced Chicken Rice Bowl
₹180 ₹220 18% OFF.
1656 favs 200+ bought today
Gusteau - Smoked Ratatouille Burrito
₹200
Available from 6:00PM
30 favs-90+ bought today
Peppy Paprika Burrito
₹200
Available from 6:00PM
33 favs 100+ bought today
Black Bean Veggies Hakka Noodles
₹160 ₹200 20% OFF
910 favs 150+ bought today
Peri Peri Chicken 'n' Quinoa Olive Rice
₹180 ₹230 22% OFF
Available from 6:00PM
1315 favs 500+ bought today
Jaipuri Kofta 'n' Laccha Paratha
₹170 ₹200 15% OFF
379 favs 150+ bought today
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
html css
html css
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
asked Nov 14 '18 at 7:19
aswanicbaswanicb
33
33
Just give the Carousel awidth: 100vw
– Badgy
Nov 14 '18 at 7:28
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34
add a comment |
Just give the Carousel awidth: 100vw
– Badgy
Nov 14 '18 at 7:28
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34
Just give the Carousel a
width: 100vw– Badgy
Nov 14 '18 at 7:28
Just give the Carousel a
width: 100vw– Badgy
Nov 14 '18 at 7:28
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34
add a comment |
1 Answer
1
active
oldest
votes
0
The page you posted can be fixed using width: 100%; on the .content element and width: 100% on the .carousel. It is a quick fix, but it works for your issue.
answered Nov 14 '18 at 8:13
MichaelMichael
269111
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294941%2fhow-to-increase-the-width-of-a-carousel-without-changing-the-responsiveness-of-a%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The page you posted can be fixed using width: 100%; on the .content element and width: 100% on the .carousel. It is a quick fix, but it works for your issue.
answered Nov 14 '18 at 8:13
MichaelMichael
269111
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
|
show 4 more comments
0
The page you posted can be fixed using width: 100%; on the .content element and width: 100% on the .carousel. It is a quick fix, but it works for your issue.
answered Nov 14 '18 at 8:13
MichaelMichael
269111
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
|
show 4 more comments
0
0
0
The page you posted can be fixed using width: 100%; on the .content element and width: 100% on the .carousel. It is a quick fix, but it works for your issue.
answered Nov 14 '18 at 8:13
MichaelMichael
269111
The page you posted can be fixed using width: 100%; on the .content element and width: 100% on the .carousel. It is a quick fix, but it works for your issue.
answered Nov 14 '18 at 8:13
MichaelMichael
269111
edited Nov 14 '18 at 8:23
answered Nov 14 '18 at 8:13
MichaelMichael
269111
answered Nov 14 '18 at 8:13
MichaelMichael
269111
answered Nov 14 '18 at 8:13
MichaelMichael
269111
269111
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
|
show 4 more comments
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
I tried this. But the food menu list will be not responsive in mobile view. I can't edit the width of the content class.
– aswanicb
Nov 14 '18 at 8:31
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Do you mean the navigation at the top? I can't find a element named food menu
– Michael
Nov 14 '18 at 8:33
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
Sorry..!Yes, I mean the navigation at the top
– aswanicb
Nov 14 '18 at 9:23
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
How do you want the navigation to behave? When I apply the styles I mentioned in my answer, the navigation points break into multiple lines. Do you want the nav to stay in one line without breaking?
– Michael
Nov 14 '18 at 9:45
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
Yes, sir. I need the nav to stay in one line without breaking.
– aswanicb
Nov 14 '18 at 9:47
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294941%2fhow-to-increase-the-width-of-a-carousel-without-changing-the-responsiveness-of-a%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just give the Carousel a
width: 100vw– Badgy
Nov 14 '18 at 7:28
Have you tried to target the specific element that you wish to do a width on, and work in percent rather than pixels? percentage based width should keep the carousel responsiveness intact.
– Martin
Nov 14 '18 at 8:11
Tried that. I need only carousel element in the full width of the page.
– aswanicb
Nov 14 '18 at 8:34