Social Media Widget Plugin Headr issue on custom landing page help

[RichardPD]

Hi
I have just started using Genesis and made a child theme based on Trestle framework.
I use Social Media Widget plugin by Blink Web Effects and the social icons display on the header fine on
the blog page but not on the home page which uses a custom landing page as page template.
The landing page is set as the home page.
This means the header on this page is increased in width and cuts off the page title.
See this on site at:
Chess Rating Rise

I would like to know why the blog page and homepage are displaying this differently and more importantly how I can fix this so the social icons display properly on the landing page without increasing the header width.

I have also posted this on the plugin support page but after several days I've still had no reply or help from there.

I've looked at the page source myself with Firebug but cannot see what is causing this and I would like help to find out what the cause is and how I can fix it!

I look forward to helpful replies, thanks

http://chessratingrise.co.uk/

[JamesRoberts]

Hi Richard, not sure if it is intentional or not but there is a min-width of 800px being applied to .Standard_Gen-landing .wrap, removing that should make a difference.

---

Need beautiful and responsive Genesis child themes at amazing prices? Stop by LlamaPress and check out our themes.

[RichardPD]

Hi James
Many thanks for your help.
I do not really know what is happening here fully as my CSS skills are not as good as
ninja css level I'd like to be at.
CSS drives me nuts at times!
Can you please explain why the max-width is causing the header height to be increased on this landing page?

Commenting out (removing) this .Standard_Gen-landing .wrap does indeed fix the header height with the social icons, but the landing page wrap width is now 1140 (so the page content spans across more of the page width) as per CSS:
.wrap {
margin: 0 auto;
max-width: 1140px;
}
How do I keep the Standard_Gen .wrap at 800px (so the content does not span so far across the page) and have the header the correct height?

AND ANOTHER THING.......
Why is the navigation menu so large on the custom landing page? How can I make it the same size as it is on the blog page?

[RichardPD]

Why can't I edit my post?
I added one edit and now I now longer have an edit function available so I cannot make any more editsto this!

This post is just to say fixing the nav menu bar height was simple..I just changed margin-bottom:40px; to
.Standard_Gen-landing ul li {
background: url('images/1.png') no-repeat;
margin-bottom: 4px;
padding-left: 44px;
}

I add remove sidebar php code to both home.php and landing-page.php.

I still need to adjust the content width.....

[JamesRoberts]

I see. If you set the max-width of .Standard_Gen-landing .wrap back to 800px and modify the width of .site-header .widget-area from 800px to 50%, I think that should work.

---

Need beautiful and responsive Genesis child themes at amazing prices? Stop by LlamaPress and check out our themes.

[RichardPD]

Hi James

You are a star...many thanks for your help.

As you advised, I changed the width of Standard Gen Landing wrap to 1000px (a better width I felt to display my page content) and .site-header .widget-area to 50% (ie 500px) and this all displays fine!

I have spent a couple of hours messing around with custom header coding and other coding to fix this but all was unsuccessful until I tried your advice. As I said earlier I do not understand why changing the wrap WIDTH has affected the header HEIGHT and I would not have dreamt of reducing .site-header .widget-area to 50% to get the header to the right size! I would really appreciate it if you could try and explain what has happened here so I can get more understanding of this Genesis code. I am just starting with Genesis and have learnt a little so far and the more I can learn and understand it the better it is for me running a Genesis themed site!

Meanwhile I really appreciate your great help..thanks very much again!

[JamesRoberts]

No problem at all Richard, happy to help and glad it is working for you now.

To answer your question, .site-header .widget-area was set to 800px wide which takes up the whole space and this was causing the element to drop down onto the next line, narrowing this element so that the total width of it PLUS your logo to 800px or less lets the 2 elements sit on the same line. Does that make sense?

---

Need beautiful and responsive Genesis child themes at amazing prices? Stop by LlamaPress and check out our themes.

[RichardPD]

James

Thanks for your explanation. As far as I can tell the Standard_Gen-landing.wrap was 800px; wide and the widget area 800px; wide and so the 2 together making 1600px wide being too large for the width of the theme (1140px I think) so that the header was forced down and so was made wider?
Does that make sense? Is that the correct explanation? I think so.....
However, now I have the Standard_Gen-landing.wrap at 1000px; wide and .widget area 500px so that totals 1500px wide and yet this displays the header properly. Is the issue the width of the theme or the width of the screen it is viewed on or both?!

That brings me on to my next question:- Why didn't I get this issue on the blog page? Presumably because the blog page wrap is different size? I do not know as I haven't studied the code yet!

Again, many thanks for your great help James with helping me fix this...nice to meet you and have a great day! 🙂

[JamesRoberts]

Yes that is correct Richard, essentially there was OVER 1000px (in width) trying to fit inside a 1000px space which was forcing the element to drop onto the 2nd line.

As for your blog page, I notice this is at 1140px width (which differs from your chess rating page), this is why you did not get the issue on your blog page,

Hope that makes sense Richard, and no problem, nice to meet you too.

---

Need beautiful and responsive Genesis child themes at amazing prices? Stop by LlamaPress and check out our themes.

[Author]

Posts