Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Staz2019

Reduce mobile logo/main content padding (West template)

Question

Hi there,So I want to reduce the padding only for mobile, reduce padding above and below header/logo, the top and bottom padding of the main content section (horizontal line and everything below it). I might also need to reduce the top/bottom padding around the horizontal line as well. Can anyone help me with the custom CSS? Your help would be greatly appreciated!

Working out of West template. Website www.astallcop.com

alt textalt text

screen-shot-2019-08-14-at-30141-pm.png.76a2707a4cce9b74b93fb87f41bd95d1.png

screen-shot-2019-08-14-at-30148-pm.png.6b233ff042fdb8ee6f48d52d30ea185b.png

Edited by Staz2019
Updated description

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

After ridiculous amount of research and trial and error, I finally got it! Probably not perfect code but it gone done what I wanted - reducing the various spacing between each element. I am going to play with it a little more and readd some of the spacing to make it visually perfect but below including the code I frankensteined together.

Here is image of the end-result.

alt text


@media screen and (max-width: 700px) {
 .sqs-block-horizontalrule
{max-width: 100%}
.sqs-block-content hr {
margin-top: -33px !important;
margin-bottom: -33px !important;
}
 .Main-content { margin-top: -20px !important;
margin-bottom: -82px !important;
}
.sqs-block-html {margin-top: -40px;
  padding-bottom: 7px;
}
 }

.Mobile-bar--top {
  padding-top: 0px !important;
  margin-bottom: -20px !important;
}


screen-shot-2019-08-14-at-61802-pm.png.2e8856b7cd4c5314cc2895d2a92abcdd.png

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...