remove side borders for mobile display

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/

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?

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 10 months ago by askdesign.

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://www.ads-software.com/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 10 months ago by luk4.

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

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://www.ads-software.com/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!