Remove padding on mobile

EffieMcNair · July 2017

Can I please get some help to remove the padding on mobile: please see the problem in the following link: http://www.solarpowerpanels.net.au/solar-panels-reviews/lg-solar-panels-review/

I was going around, adding seperated section for mobile etc, but I need to create many pages and need a better solution. I tried to add the following code but it didn't work:

@media only screen and (max-width: 767px)

responsive.css?ver=20.2:420

.section_wrapper .mcb-wrap, .section_wrapper .column, .container .column, .sections_group, .four.columns {

padding: 0 !important;

}

Many thanks,

Effie

Bryan · July 2017

Hello,

where exactly do you want to remove the padding?

thanks

EffieMcNair · July 2017

the 50px in the right side. (this is the space that I added to the wrap to make space between the columns. It is good on desktop, but on mobile, I'd like to know how to remove it.

see image attached

- the padding that I'd like to remove is in green

Thank you

Bryan · July 2017

Add a custom class to the wrap, like : my-right-padding, then go to custom css&js>css and set a custom CSS for this class. So it would look like this:

.my-right-padding {
	padding-right:50px;
}
@media (max-width:767px) {
	.my-right-padding {
	padding-right:0px;
}
}

EffieMcNair · July 2017

Works great! thank you! :-)

mxbrnl · March 2018

It seems that this does not work in the new versions of betheme.
Try doing it to remove the top padding in mobiles and it did not wor

How can this be done?

Bryan · March 2018

mxbrnl
This css will not work because you have to first declare a class manually.
Since it is CSS it does not matter which version of the theme you use.
Please send us a link, screens and describe your problem.
thanks

mxbrnl · March 2018

Hi guys
Of course, first declare this special class in the page section, but it does not work.

Attached some images for better understanding
Webpage: https://bit.ly/2pFNc5z ScreenShots: https://imgur.com/a/mx3o8

Thanks so much, as always!

Bryan · March 2018

Okay but on what page do you have this set up? It is not on the main page.

mxbrnl · March 2018

All the inner pages ;-)

(all except front page)

Bryan · March 2018

Since the padding in the section is added inline, you will need to add !important to your css statements.
thanks

mxbrnl · April 2018

Hi guys

Added !important to my CSS statements and nothing happens.... :-(

My custom class are: my-top-padding

And my CSS code for that is:

.my-top-padding {
padding-top: 320px !important;
}
@media (max-width:767px) {
.my-top-padding {
padding-top: 0px !important;
}
}

Thanks for revisited this!

Bryan · April 2018

What about not using custom CSS and enabling/disabling sections on different devices.
When you edit a section, you will find an option for its visibility. So you can hide this section on mobile and turn on another section that was disabled on desktop.
thanks

mxbrnl · April 2018

Of course guys, this was the first method I used.

The problem is the new section generates an ugly white stripe despite having transparent color.

I tried using a transparent image inside it, but nothing eliminates this white stripe.

How can I do?

Thanks!

Bryan · April 2018

What white stripe? Can you make a demo page like this and show us the white stripe?

mxbrnl · April 2018

Hello

I refer to this white stripe:

https://imgur.com/a/lxiNj

There is no configuration or setting on the theme that generates this

Whats wrong on desktop? Mobile works nice (section disappears)

Thanks team!

Bryan · April 2018

This white stripe is the top padding you added to the section with your custom menu on top.
There is nothing wrong with it.
thanks

mxbrnl · April 2018

Why with the normal section the top padding is transparent? and when it is hidden in mobiles appears white?

Obviously, the problem is that the one that is hidden in mobiles, does not allow to see the background

Bryan · April 2018

Here you have your page on desktop:
http://prntscr.com/j14i0q
and this is on mobile:
http://prntscr.com/j14i9y

As you can see the padding stays and the background image is covering it.
All of your pages share the same behaviour.
thanks

Xerosoft1 · May 2021

how can I remove padding that automatically shows up?

Phil · May 2021

Hello @Xerosoft1,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us the link.

It would be great if you also attach a screenshot of section and padding you are talking

Thanks

Xerosoft1 · May 2021

Hi! it is currently in developing stage on my local. here is the screenshot of what im talking.

https://prnt.sc/12taq8n

Phil · May 2021

Please, open this section options, and there you will be able to set the padding to zero.

Thanks

Xerosoft1 · May 2021

I

https://forum.muffingroup.com/betheme/discussion/comment/199386#Comment_199386

I already check that part and it was set in 0

Phil · May 2021

Please, turn off all of the plugins, refresh your cache, and check if this padding still appears.

Moreover, if you are using a child theme, switch to parent, and recheck it.

Thanks

Remove padding on mobile

Comments