Return to previous page

Would like to make some containers full width on mobile

This topic has 9 replies, 3 voices, and was last updated 3 months, 1 weeks ago ago by Andrew Mitchell

Applesandcider

Participant

July 10, 2024 at 13:11

Hi,

There are some containers that I’d like to see what they look like full width when viewed on mobile. However I can’t seem to get rid of that last white bit on both the left and right side of the containers (see screenshot). May I ask for a suggestion? This isn’t the only container i’d like to see full width so may I ask you to show me how it’s done if there is a way to do it? I have tried changing the page templates to Elementor full width instead of the default theme template but that kind of messes up alot of the content on my pages and I’d need to resize alot of stuff, so would rather avoid that solution if possible.

Thanks so much!

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#404016 Copied Theme version: 9.3.14

8 Answers

Applesandcider

Participant

July 10, 2024 at 13:16

Ignore the wetransfer video that wasn’t supposed to be in there, thanks

#404019 Copied

Luca Rossi

Support staff

July 11, 2024 at 06:15

Dear @Applesandcider,

We hope this message finds you well. Could you please take a moment to inspect your containers and adjust the padding to zero? Here is the link for your reference: https://prnt.sc/0OzAdpr8gsfd

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

#404136 Copied

Applesandcider

Participant

July 11, 2024 at 06:33

Hi,

Please see attachments container padding and widget padding, both have been set to 0 except for the widget padding that has 10px padding ontop, not on the sides (i don’t think this should effect the width of the widget?)

Now with these settings, please see the screenshot of the container when viewed on my mobile, can you see where I have drawn the green lines that there is still that white space on both sides of the container?

That is what I’d like to completely remove so the container is properly full width.

I have given you the shop page link on where this container is actually seen, it is only viewable on mobile view.

Thanks for looking into this,

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#404140 Copied

Luca Rossi

Support staff

July 11, 2024 at 08:11

Hi @Applesandcider,

We’ve also set the padding of the top container to 0: https://prnt.sc/SrVP4B-CrXJN

Can you check now?

Thank you!

#404159 Copied

Applesandcider

Participant

July 11, 2024 at 08:41

Yes that worked, sorry I didn’t think to change the top padding.

Could you please take a look at the video of my homepage viewed in mobile?

I would also like these containers to be full width. They all have padding on the top and bottom but removing the top and bottom padding so that everything is 0 did not make these containers full width.

Thank you!

Please contact administrator
for this information.

#404165 Copied
Luca Rossi

Support staff

July 11, 2024 at 09:48
Hi @Applesandcider,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (max-width: 600px){
    .home .sidebar-position-without .content.col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }
}
```
Hope it helps!
#404179 Copied
Applesandcider

Participant

July 11, 2024 at 12:27

That worked perfectly, thank you again Luca!!!

#404230 Copied

Andrew Mitchell

Support staff

July 11, 2024 at 12:27

Dear Applesandcider,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#404231 Copied
Tagged: full width containers woocommerce, mobile full width containers, mobile-friendly woocommerce templates, woocommerce mobile design, woocommerce templates, wordpress mobile optimization, wordpress responsive design
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Would like to make some containers full width on mobile’' has been successfully resolved, and the topic is now closed for further responses

Would like to make some containers full width on mobile

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection