Community Forums › Forums › Archived Forums › Design Tips and Tricks › Executive Pro Header Widget Too Long
Tagged: executive pro, header, widget
- This topic has 3 replies, 2 voices, and was last updated 9 years, 9 months ago by lvvvvvl.
-
AuthorPosts
-
July 5, 2014 at 1:53 am #113025lvvvvvlParticipant
Hello,
I recently replaced my header menu in the Executive Theme for a widget which I created linking to my social pages that aligns beside the main logo image.
The widget looks fine in pc screens, but when I check the website on a small screen or mobile device, the header widget jumps to the next row and goes full width of the screen which distorts the whole site and compresses the content area to one side.
This is my header css:
Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { margin: 0 auto; min-height: 100px; width: 100%; } /* Title Area --------------------------------------------- */ .title-area { font-weight: 700; float: left; overflow: hidden; width: 320px; } .site-title { font-size: 36px; font-size: 3.6rem; line-height: 1.25; margin: 0 0 5px; margin: 0 0 0.5rem; } .site-title a, .site-title a:hover { color: #222; display: block; padding: 28px 0 0; padding: 2.8rem 0 0; text-decoration: none; } /* Full width header, no widgets */ .header-full-width .title-area, .header-full-width .site-title { width: 100%; } .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; } /* Logo, hide text */ .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; } .header-image .title-area, .header-image .site-title, .header-image .site-title a { float: left; margin: 0; max-width: 586px; min-height: 100px; padding: 0; width: 100%; } /* Widget Area --------------------------------------------- */ .site-header .widget-area { float: right; width: 554px; } .site-header .widget { padding: 28px 0 0; padding: 2.8rem 0 0; } .site-header .search-form { float: right; margin-top: 24px; margin-top: 2.4rem; width: 50%; }
And this is the additional css to customize the widget:
.site-header #text-22 { padding: 16px 20px; background-color:#ffffff; width: 554px; }
What have I done wrong to make the widget expand so long?
Thank you
http://goo.gl/v9MtXRJuly 5, 2014 at 4:59 pm #113088lvvvvvlParticipantDoes nobody know how to fix this? I think my traffic is being affected due to this problem as many visitors can't read the content.
July 5, 2014 at 6:30 pm #113096devParticipantThere are a lot of points for failure here... could be the code in how you created the widget area, it could be some CSS somewhere.
You didn't show us the media queries. I assumed you modified those for your new widget area? If not, well that is probably your problem.
If you don't know how to code a media query CSS selector there are a number of people on this board you can hire to get it done for you... (but not me... I'm way too busy right now.)
July 8, 2014 at 3:07 am #113342lvvvvvlParticipantI figured out that by making the header widget less wide and by forcing it to float auto normally and to the left when on a mobile device (using a media query) it fixed somewhat the problem.
My only problem now is that by reducing the header widget width, I've created a gap between the header image and the widget, and the gap displays the background color of the website instead if just white. How do I make the whole site.header area background white by default underneath the header image and widget?
Here's a screenshot of what I mean: http://snag.gy/aO8T9.jpg
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.