remove side borders for mobile display

  • kwatson020785

    (@kwatson020785)


    2 years, 3 months ago

    My website is displaying incorrectly on mobile devices – too much padding at the sides which is squashing all of the images and text to the middle of the screen. I want to fix this. I am using wordpress responsive block theme and my images are in Soliquey sliders. Any advice welcome – I am new to wordpress and website development in general

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • luk4

    (@luk4)

    2 years, 3 months ago

    Hi @kwatson020785

    How would you like the padding to be on other pages such as About or Participation Work? Would you like to reduce it as well, or only on the homepage? Also, would you like the header with the site title to follow the same width than the content or do you prefer to keep it as is?

    Just so you know, you can easily check how your pages appears on different device sizes thanks to Firefox’s Responsive Design Mode. See: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/

    Thread Starter kwatson020785

    (@kwatson020785)

    2 years, 3 months ago

    hi, id like it to be less padding on ALL pages. And yes, the header to follow same alignment.

    Also for the sliders to appear larger?

    askdesign

    (@askdesign)

    2 years, 3 months ago

    Hi there @kwatson020785,
    Chrome also has Dev Tools (like Firefox) to help you identify selectors and properties. Your .container class is 80% of the browser width:
    .container {
    width: 80%;
    margin: 0 auto;
    }

    At the 990px breakpoint, that width changes to 748px:
    .container {
    width: 748px;
    }

    You can modify that in your style.css file, in the media queries area. Maybe keep it at 80% or increase it to 90%. It’s up to you.

    If you keep digging deeper, you’ll also find a .single_left class with a 520px width. You can also change this:

    @media only screen and (min-width: 768px) and (max-width: 989px)
    .single_left {
    width: 520px;
    }

    change to “auto” or “100%”
    @media only screen and (min-width: 768px) and (max-width: 989px)
    .single_left {
    width:auto;
    }

    Good luck!

    • This reply was modified 2 years, 3 months ago by askdesign.
    luk4

    (@luk4)

    2 years, 3 months ago

    Hi again @kwatson020785

    Sorry for the delay. Your theme’s templates are a bit muddled, but here’s a CSS snippet that should meet your needs:

    /* Fix Right & Left Page Paddings on Mobile
 * https://ww.wp.xz.cn/support/topic/remove-side-borders-for-mobile-display/
 */
@media only screen and (max-width: 767px) {
    body .container {
        width: 100%;
        max-width: 100%;
    }
    body .full_logo_cont {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
    body .stalac_box,
    body .stalac_box img {
        max-width: 100%;
        margin-right: 10px;
        margin-left: 10px;
    }
    body .single_inside_content img.soliloquy-image {
        width: 100%;
    }
}

    Add this to the Additional CSS tab in the Customizer.

    Feel free to ask if you need some adjustements. 🙂

    • This reply was modified 2 years, 3 months ago by luk4.
    Thread Starter kwatson020785

    (@kwatson020785)

    2 years, 3 months ago

    Thank you – that worked for the text! Appreciated.

    I am still having issues with the galleries/sliders on my mobile.

    On the page social connectedness (https://katewatson.org/work/social-connectedness/) the gallery appears really small on mobile. I have tried changng size to full size and making it adaptive, but doesnt work. There is also a large gap before the text after which I cant remove?

    Also on all galleries/sliders, when I rotate the phone to landscape, the galleries don’t respond

    Any ideas? Thanks

    luk4

    (@luk4)

    2 years, 3 months ago

    Hi @kwatson020785

    Great, I’m glad the CSS snippet fixed your original issue! 😊

    If you’re experiencing problems with your sliders such as those you’ve mentioned, you should ask for help on the support forum dedicated to the slider plugin you’re using. For Soliloquy, it’s right here: https://ww.wp.xz.cn/support/plugin/soliloquy-lite/

    Otherwise, please, don’t forget to mark this topic as resolved. This helps the volunteers like me find the topics that still need attention. Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘remove side borders for mobile display’ is closed to new replies.