Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Add Padding to a section with Image

Recommended Posts

jmad+    80
jmad

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
Danny    1,327
Danny

HI,

 

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

@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
jmad+    80
jmad

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×