Jump to content

Archived

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

tcuzzo

Media Box issues

Recommended Posts

tcuzzo    0
tcuzzo

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


DMS3

Share this post


Link to post
Share on other sites
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tcuzzo    0
tcuzzo

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

 

Any other ideas?


DMS3

Share this post


Link to post
Share on other sites
Aires+    258
Aires

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


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


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

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:
 
 
  • Like 2

Please search our forums, before posting!

Share this post


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

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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
roryorr+    2
roryorr

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

You will master it in no time :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
tcuzzo    0
tcuzzo

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/


DMS3

Share this post


Link to post
Share on other sites
batman    389
batman

Hi tcuzzo

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

Thank you


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
tcuzzo    0
tcuzzo

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


DMS3

Share this post


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

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 ?


Please search our forums, before posting!

Share this post


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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×