• 0
Sign in to follow this  
Followers 0

Add Padding to a section with Image

Question

Posted · Report post

I'm trying to have a section with responsive padding. I'm able to accomplish this no problem using css on a section with just a colored background.  However when the section has a background image then the padding creates a colored band at the top and bottom.  

 

When I inspect the section with image in saying element.style is taking top priority and padding is 20px.

 

How do you change section padding responsively for a section with a background image?

 

 

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

HI,

 

You can either use percentage or use media queries, I would probably go with media queries.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Danny 

 

I used media queries below but when I apply these to a section with a background image (added through DMS editor selector) instead of just padding and the image expanding I'm getting black space padding.  

 

.responsive-sec-pad {

padding-top: 50px;

  padding-bottom: 50px;

&{@media(max-width: 767px){

      padding-top: 25px;

      padding-bottom: 25px;

      &{@media(max-width: 480px){

      padding-top: 15px;

      padding-bottom: 15px;

        }

      }

    }

  }

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

This still isn't working.  Maybe I haven't explained the problem well enough.  

 

I've added a photo background image.  I wan't to set the padding on the section so it scales via @media.  When I set the padding in the section area selector the padding works and pushes any components down in the section but it's not responsive.  So I removed the padding in the selector.   Then added the above code.

 

Instead of pushing the components in the section down and leaving the photo as a full background it creates space above and below the photo that should be the background resulting in black/white space between the photo and the adjacent sections.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you're receiving white space when using your padding, then you're adding padding to the wrong selector i.e the one where the image has been added, you want to add it to another div/selector.

 

Please be aware that we do not provide custom CSS support for user created code. If you're having difficulty with custom CSS implementation, you will be best getting support from a CSS specific forum.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0