Remove padding on mobile

EffieMcNair

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

Hello,

where exactly do you want to remove the padding?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

EffieMcNair

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

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;
}
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

EffieMcNair

Works great! thank you! :-)

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

All the inner pages ;-) 

(all except front page)

Bryan

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mxbrnl

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Xerosoft1

how can I remove padding that automatically shows up?

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Xerosoft1

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

https://prnt.sc/12taq8n

Phil

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Xerosoft1

I

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

I already check that part and it was set in 0

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next