Jump to content


Photo
- - - - -

Media Box issues


Best Answer Danny , 16 April 2014 - 09:49 AM

@roryorr, you will need to do as I have done above and either target a specific mediabox and then reduce the margin. However, seeing as though you have quite a few on that page, if you simply doing this:

 

.section-mediabox p {
margin-top: 0px;
margin-bottom: 0;
}
 
It will effect all MediaBoxes throughout your site, so we can prefix the code with the pages id so that this CSS only effects this page. For example:
 
.page-id-75 .section-mediabox p {
margin-top: 0px;
margin-bottom: 0;
}
 
However, you will still have the problem where you have a spacing issue with the first mediabox on that page, which is beneath the Slider. So what you will need to target that MediaBox and keep the margin-top intact otherwise the MediaBox will be practically right underneath the slider.
 
#mediaboxugbao9.section-mediabox p {
margin-top: 1.55em;
}
 
So this should resolve your issue. I highly recommend you sign up to Code School, as they provide a free only course/interactive tutorial for Google Chromes dev tools. By doing this, it will allow you to make your own changes quicker and easier.
 
Quick Tip, in Chromes dev tools, margins on elements (when inspecting) are always displayed with a orange color and padding is displayed with a green color. This will help you quickly distinguish between the two.
Go to the full post


  • Please log in to reply
14 replies to this topic

#1 tcuzzo

tcuzzo

    Member

  • Members

  • 12 posts
  • Framework Version:2.1.6.1
  • Country: Country Flag

Posted 11 April 2014 - 11:42 PM

Media box bigger than image.

 

I am trying to make my media box the same height as the image inside of it and it appears that it is adding padding and margins to it.  Not quite sure how to remove it.

 

I am also trying to remove the header element, hit delete numerous times, it goes away and comes back.

 

Here is the page I am working on, http://50.28.25.8/home2

 

See the extra black space under the logo at the top of the page, that is what I am trying to remove.

 

Also, wondered if there is a way to get the menu on the top to float right outside of the fixed area in middle of page.

 

Thanks for your help

 

Timm



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2014 - 01:35 AM

Hi Timm

 

There's padding in a number of area's there that can be removed, most of the padding in that area seems to be coming from the margin at the bottom of the image. You can remove that by using the code below in your custom css.

 

.the-media .alignleft {
    margin: none;
}
 
Also you can try removing the margin at the bottom of the section pad.

 

body .pl-area .pl-section .pl-section > .pl-section-pad .mediabox-wrap {
    margin-bottom: 0;
}


#3 tcuzzo

tcuzzo

    Member

  • Members

  • 12 posts
  • Framework Version:2.1.6.1
  • Country: Country Flag

Posted 12 April 2014 - 02:07 PM

I have tried both of those and I'm still not successfully removing the padding.

 

Any other ideas?



#4 Aires

Aires

    Advocate

  • Members

  • 321 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 12 April 2014 - 03:45 PM

Hi, you could give this a try Groundwork Plugin I find it very useful for removing or adding padding.



#5 Danny

Danny

    Is Awesome!

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

Posted 13 April 2014 - 11:10 AM

Add the following to your custom CSS:

 

#mediaboxuozjws1 .pl-section-pad, #mediaboxuozjws1 .the-media {
margin: 0 !important;
padding: 0;
}
 
This removes all margin and padding from the MediaBox image.
 
Adding this will reduce the height of the Fixed Pusher.
 
#site .fixed-top-pusher {
height: 66px !important;
}
 
which will make your Fixed Nav look like this:
 
 

  • GetMeWebDesign and Aires like this

#6 roryorr

roryorr

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 15 April 2014 - 03:44 PM

Hi guys, I'm having a similar issue here: http://www.cabaritao...retreat.com.au/

 

Trying to reduce the gap between media boxes, seems to have excess padding at the bottom of each box? Ideally I'd like to reduce the gap by half.



#7 Danny

Danny

    Is Awesome!

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

Posted 16 April 2014 - 09:49 AM   Best Answer

@roryorr, you will need to do as I have done above and either target a specific mediabox and then reduce the margin. However, seeing as though you have quite a few on that page, if you simply doing this:

 

.section-mediabox p {
margin-top: 0px;
margin-bottom: 0;
}
 
It will effect all MediaBoxes throughout your site, so we can prefix the code with the pages id so that this CSS only effects this page. For example:
 
.page-id-75 .section-mediabox p {
margin-top: 0px;
margin-bottom: 0;
}
 
However, you will still have the problem where you have a spacing issue with the first mediabox on that page, which is beneath the Slider. So what you will need to target that MediaBox and keep the margin-top intact otherwise the MediaBox will be practically right underneath the slider.
 
#mediaboxugbao9.section-mediabox p {
margin-top: 1.55em;
}
 
So this should resolve your issue. I highly recommend you sign up to Code School, as they provide a free only course/interactive tutorial for Google Chromes dev tools. By doing this, it will allow you to make your own changes quicker and easier.
 
Quick Tip, in Chromes dev tools, margins on elements (when inspecting) are always displayed with a orange color and padding is displayed with a green color. This will help you quickly distinguish between the two.


#8 roryorr

roryorr

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 17 April 2014 - 01:14 AM

Thanks Danny I really appreciate the help, this forum has been great and everyone's answers very helpful.

 

Just checking out the code school site now, will use Easter weekend to go through some of the courses.

 

Cheers!

Rory



#9 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 April 2014 - 01:53 AM

You will master it in no time :) 



#10 tcuzzo

tcuzzo

    Member

  • Members

  • 12 posts
  • Framework Version:2.1.6.1
  • Country: Country Flag

Posted 19 April 2014 - 03:15 PM

I have tried the above and I am still getting the extra space...not sure why?

 

 

Another question??

 

Could anyone recommend a way to get a drop down in the top of my menu like the green one on the right here: http://www.google.com/hangouts/



#11 batman

batman

    Bat Learning

  • Members

  • 2165 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 April 2014 - 10:17 PM

Hi @tcuzzo

Please, you can open your own topic, this topic is marked as resolved.

Thank you



#12 tcuzzo

tcuzzo

    Member

  • Members

  • 12 posts
  • Framework Version:2.1.6.1
  • Country: Country Flag

Posted 20 April 2014 - 01:54 PM

HI @batman

 

I originally opened this topic and my post was related to it!!

 

I have tried the fix and it does not work so I was hoping for another suggestion as to what I am doing wrong.

 

Thanks



#13 Danny

Danny

    Is Awesome!

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

Posted 20 April 2014 - 02:20 PM

@tcuzzo - The code I provided most definitely works, I tested it before I added it to my post. Are you sure the code has been added to your custom CSS ?



#14 tcuzzo

tcuzzo

    Member

  • Members

  • 12 posts
  • Framework Version:2.1.6.1
  • Country: Country Flag

Posted 20 April 2014 - 02:30 PM

@Danny

 

I do have it in the correct spot, I think.

 

See below.  I'll give you access if you can fix it.

 

screen2014.png

 

https://www.dropbox..../screen2014.png



#15 Danny

Danny

    Is Awesome!

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

Posted 20 April 2014 - 02:45 PM

Then you have something causing an issue, as I am not seeing the CSS loaded on your page. I recommend you remove all custom CSS, add the code I gave and nothing else and see if this resolves your issue.