- This topic has 18 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
Can you help me with this? I want do increase width of my site, but just on mobile view. For the record, I’m using css line for site width for web. This:
@media (min-width: 1250px){
#page-container .container {
max-width: 1100px!important;
width: 1100px!important;
}
div#content.content-with-sidebar-right {
width: 69%;
}
#sidebar.sidebar-right{
width: 31%;
}
}Hi @amplitum,
I hope you are well today and thank you for your question.
Could you please share me your site URL where you are using this code so that i can help you to achieve it?
Best regards,
Shufflehound teamYou can increase site width on mobile by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 1024px){ body .container { max-width: 100%!important; width: 95% !important; } }That’s it. Thanks! <3
It works, but there is a problem with slider, under this 6 posts…
Solution for this topic
To resolve it you can reduce the slider width on mobile devices using below custom CSS code.
@media (max-width: 767px){ .slick-slider .slick-list { width: 336px !important; } .blog-fancy-carousel-sides.slider-arrows-sides.slick-slider { width: 336px !important; display: table; margin: 0 auto; } .slick-slider button.slick-next.slick-arrow { right: 22px !important; } }Ok, but now there is a white space on the right side of first (main) slider and second
Could you please share the screenshots of it?
Right side of both slider’s…
Solution for this topic
The space will be there to avoid the problem mentioned earlier but we can display them in the centre using below CSS code.
@media (max-width: 767px){ .slick-slider .slick-list { margin: 0 auto; } }I don’t understand you… I want first (main) slider to be 100% width. Like this:
.slick-slider .slick-list {
max-width: 100% !important;
width: 100% !important;
}But have problem with second slider now… You can resize browser to mobile to see
Now i don’t see the second slider at all on your site as shown in the attached screenshot.
Please advise.
Yes, that’s a problem. 🙂 First slider is now ok.
Please make it how it was before displaying two sliders on mobile so that I can help you to remove white space around them.
Ok, now it’s like before.
Solution for this topic
You can make first slider full width using below CSS code.
.blog-slider-list.slick-slider .slick-list { width: 100% !important; }This is ok.
ok
