Jump to content

Archived

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

dchetson

Media Box Padding

Recommended Posts

dchetson+    2
dchetson

I have four media boxes stacked in a column, but there is a significant amount of padding between them. I'd like to have the images be bigger and reduce the padding. If I make the images bigger then it throws off all of the alignment. Is there any way to reduce the padding around these boxes? Website is www.chetson.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The image is reduced in size because you have set it to have an offset and a width of 4/12, make it 12/12 and remove the offset, this should make the image appear full width.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dchetson+    2
dchetson

But that still doesn't resolve the padding issue between images vertically.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

All MediaBoxes have padding/margin, if you want to reduce the gap between your images, you will want to reduce the padding for each MediaBox. You can do this by using 

 

However, in my opinion the best method would be for you to include all these images in one MediaBox, and use HTML. If you want to try the HTML method instead.

 

Add the following to one MediaBox:

 

https://gist.github.com/Dannyholt/f6f19d32eb12f71f25e5

 

Add the following to your custom CSS:

 

#site .list-unstyled {
padding-left: 0;
list-style: none;
}
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • Kempston
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
      Rob
    • jeomiland
      By jeomiland+
      Please refer to cassclayton.com/dev
      Need to place the 2 media boxes (that contain the ragged dark background for Playlist of month and Song suggestion) right under the content above that. Have a basic 2-column format for the page with sidebar widgets in narrow column to right and main content in large area left column. When I try to drag another 2-col section just under the other content, instead of what I want, a new canvas section (?) is formed into which the new 2-col is placed and this gets placed AFTER all that stuff in the narrow right column!
      How does one create a format where you can have multiple columns inside a column?
      I can perhaps do this manually with DIVs and float: left CSS, but that will make it very clumbsy for client then to update that content.
      Appreciate your insights, thanks
      JE
      Oh, also I have to drag out a 2-col twice before one of them stays on refresh (see post from the other day "2-colums inside other column - disappears on refresh? CSS not saving on refresh" - still waiting for reply on that.)
×