Jump to content


Photo
* * - - - 1 votes

Add Padding to a section with Image


  • Please log in to reply
4 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

  • 964 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 February 2014 - 01:48 AM

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?

 

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17666 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 12:09 PM

HI,

 

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



#3 jmad

jmad

    Advocate

  • Members

  • 964 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 February 2014 - 05:06 PM

@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;

        }

      }

    }

  }

}



#4 jmad

jmad

    Advocate

  • Members

  • 964 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 February 2014 - 01:05 PM

@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.



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 17666 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 February 2014 - 01:19 PM

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.