We are currently having an issue with padding/spacing, since we are designing the website on a desktop, padding between sections look good but when viewing on a mobile device; the padding adds to much unwanted space. Is there a solution for this? Perhaps a method to input a percentage for padding rather than a fix pixel?
We truly appreciate your continued support. One of the best theme to work with for sure!
You can use this css and adjust as per your likeing, Add this into the Custom CSS box located in your Salient Options panel :
/* Tablet */
@media only screen and (max-width: 1000px) {
body .wpb_row {
padding: 20px 52px 20px !important;
}
}
/* Mobile */
@media only screen and (max-width: 480px) {
body .wpb_row {
padding: 20px 52px 20px !important;
}
}
Add this into the Custom CSS box located in your Salient Options panel :
/* iPad fixes */
@media only screen and (min-device-width: 481px) and (max-device-width: 1025px) {
body .wpb_row {
padding: 20px 52px 20px !important;
}
}
Hi there, I have used this code and while it does make the padding better, all of my text content (while centered) is shifted all the way to the right of the mobile screen. Can anything fix this issue?
Dear ThemeNectar support team,
We are currently having an issue with padding/spacing, since we are designing the website on a desktop, padding between sections look good but when viewing on a mobile device; the padding adds to much unwanted space. Is there a solution for this? Perhaps a method to input a percentage for padding rather than a fix pixel?
We truly appreciate your continued support. One of the best theme to work with for sure!
Warm regards,
Joe Ma
Marketing Associate
www.mota.com
Hey Joe!
You can use this css and adjust as per your likeing, Add this into the Custom CSS box located in your Salient Options panel :
/* Tablet */ @media only screen and (max-width: 1000px) { body .wpb_row { padding: 20px 52px 20px !important; } } /* Mobile */ @media only screen and (max-width: 480px) { body .wpb_row { padding: 20px 52px 20px !important; } }
Cheers
ThemeNectar Support Team
These code lines will take care of the issue in the attached screenshot from a Nexus 7" tablet?
Hey Chad!
Can you provide the page url as well so we can have a look.
Thanks
ThemeNectar Support Team
http://www.radianceofpalmbeach.com ... I just want less space/padding on the sides while in portrait orientation on a tablet.
Hey Again!
/* iPad fixes */ @media only screen and (min-device-width: 481px) and (max-device-width: 1025px) { body .wpb_row { padding: 20px 52px 20px !important; } }
ThemeNectar Support Team
Hi there, I have used this code and while it does make the padding better, all of my text content (while centered) is shifted all the way to the right of the mobile screen. Can anything fix this issue?
Thank you!
@Megan,
You will have to add a Extra Class to the Rows you want to apply the code to and then add the class name in the css selector as well.
Please open a new ticket with your page url and let us know how we can help.
Thanks
ThemeNectar Support Team