Jump to content

Archived

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

richardjacruz

Remove or reduce margin (or padding) in header

Recommended Posts

richardjacruz

I'm building a site at:

http://dev.stevensoncraneservice.com/

and I followed the instructions on building a "branding" area in the header:

http://docs.pagelines.com/tutorials/creating-a-branding-area

But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

ScreenShotforPagelinesSupport.jpg

Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.

Thanks.

Share this post


Link to post
Share on other sites
richardjacruz

I'm sorry, it looks like I am able to get the nav bar to do something I like. However, I still have from the two-column section a large amount of margin. It looks like this line is the culprit:

.pl-section-pad

But, in the "Custom" CSS area, when I make a change, there's still a bottom margin of 1em when the padding of 8px seems sufficient. In other words, when I try to change the CSS for ".pl-section-pad", I'm not getting it to respond to the changes.

Thanks.

Share this post


Link to post
Share on other sites
Danny

Hi,

Are you having hosting issues at the moment? As I have just tried to view your site and it was just constantly loading?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz

Hi, Danny. Sorry for the delay in responding to this. 

The website at http://dev.stevensoncraneservice.com should be working fine now.

I'd love to be able to tighten up the bottom margins, especially for the sake of the mobile experience.

it would also be great if I could make the social media area more responsive (perhaps having the images shrink with the smaller screen?).

Thanks.

Share this post


Link to post
Share on other sites
Danny

HI,

If you wish to remove the bottom margins/padding from your header area. Then you're going to need to inspect each element using Chromes devtools and then override them with your own custom CSS.

http://discover-devtools.codeschool.com/

In regards to shrinking the social media area for mobile devices,  you will want to use a media queries to style those elements on specific devices/screen widths.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardjacruz

Okay. Time for me to go back to school. Thanks. I've tried inspecting each element, but I wasn't sure what each element was as my CSS changes didn't seem to take effect. I thought I'd ask here because that "branding section" was a tip in the docs. Maybe this could clear things up. Thanks again.

Share this post


Link to post
Share on other sites
richardjacruz

it looks like the elements are: mediaboxuou10zx and the class needing tweaking is pl-section-pad fix where the bottom margin is 1em.

The other section is textboxulr2i92 with the same class and margin issue.

It looks like if I just knew how to change that bottom margin in "pl-section-pad fix" everything would work out great. But, I'm also wary about changing that class because I'm not sure if it will negatively affect some other part of the site.

Share this post


Link to post
Share on other sites
Aires

If you add the section I'd with the class it will only target that particular section

For example: #sectionid .pl-section-pad { Margin-bottom: 0em; }

Not at my desk to test it but it should work

Sent from my iPhone using Tapatalk

ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites
richardjacruz

Thanks, Aires. I gave that a go, and it worked like a charm.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • flourishdesignstudio
      By flourishdesignstudio+
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
×