Full width on mobile / Container issue

[mexl]

Hi,
I read already through various posts including this one: Content Band, Container Full Width/Max Width

The issue I experience happens on this page: https://www.simonhoehe.at/verzeichnis/kat/anbieter-freizeit/
If I do use the No Container template, the shortcode generated page is strechted completely and only looks good on mobiles. If we use the container template (right now) the normal view is fine, but mobile view has borders.
Using the [container] and content band on the no container template did not sort the issue. The plugin provider tried it with this CSS (which did not work):

.wpbdp-view-show_listing .entry-content.content {

max-width: 60%
margin: auto
}

So my question is:
if I use the container template, is it possible to remove the padding on mobile view? This would be the easiest workaround,

thank you,
Matt

[tristup]

Hi Matt,
Thanks for reaching out.

The left and right space in the mobile is due to the width is set to 88% of the container, which looks like a border on the mobile.

There is no such option to set different values for the container in different screen sizes, but you can get rid of this space by adding a small piece of custom CSS code to Theme Option > CSS.

@media  (max-width: 767px) 
{
    .x-container.width {    
        width:100% !important;
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
And if you are not proficient with the coding, I would suggest you hire a developer who can assist you to do the customization.

The above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[mexl]

Thank you very much Tristup,
thanks to your help I got it sorted!
All the best,
Matt

[tristup]

Hi Matt,

It’s my pleasure to help you.

Thanks