I have a six-column Color Section that displays images (details of of our six branch locations). It looks good on a regular desktop. However, when looking on a mobile device there is too much space, below the six columns and above the next Color Section.
I want to reduce the spacing when viewing the site on mobile.
Thanks for any help you can give me with this.
Sincerely,
Paul
My client forced me to put back online the non-responsive site, so going to the link I sent earlier will not show the issue.
I will provide a link to show the issue shortly.
Please take a look at this link; it shows what is happening (when you view it on a mobile phone), when I have six columns:
http://www.malottdesign.com/contact-us/
As noted on the page itself; Both Color Sections have no padding, yet there is additional white space (gray color in this case) between the sections when viewing on a mobile phone. It looks as expected on a desktop/laptop view.
Please see a couple of views here: https://www.dropbox.com/sh/b7zpgkhhutxovkm/AADieuQ5gx8hfNgU1au0j1H4a?dl=0
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#six-columns .flex_column {
margin-bottom: 0!important;
}
@media only screen and (max-width: 580px) and (min-width: 481px) {
#six-columns {
min-height: 71px;
}}
@media only screen and (max-width: 480px) {
#six-columns {
min-height: 40px;
}}
Best regards,
Yigit
Beautiful; works perfectly! Thank you!