Site width on mobile?

Home Forums Gillion Theme Site width on mobile?

Home Forums Gillion Theme Site width on mobile?

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    RESOLVED Posts
  • amplitum
    Participant

    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 team

    You 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;
        }
    }

    amplitum
    Participant

    That’s it. Thanks! <3

    amplitum
    Participant

    It works, but there is a problem with slider, under this 6 posts…

    Attachments:
    You must be logged in to view attached files.

    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;
    }
    }
    
    

    amplitum
    Participant

    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?

    amplitum
    Participant

    Right side of both slider’s…

    Attachments:
    You must be logged in to view attached files.

    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

    http://mintv.rs/

    Now i don’t see the second slider at all on your site as shown in the attached screenshot.

     

    Please advise.

    Attachments:
    You must be logged in to view attached files.

    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.

Viewing 19 posts - 1 through 19 (of 19 total)