Community Forums › Forums › Archived Forums › Design Tips and Tricks › Dynamic Text site title size issue – Genesis Sample
- This topic has 6 replies, 2 voices, and was last updated 7 years, 12 months ago by jkcarroll.
-
AuthorPosts
-
May 1, 2016 at 6:42 am #184760jkcarrollMember
Hello,
Just finished setting up the Genesis-Sample template and really like it. I am currently using the Dynamic Text option for the site title. The problem is that when my screen is smaller than 1200px wide, the title takes up two lines even though there is plenty of room. Once it gets to 960px, the text and menu becomes centered and looks fine.
I've messed around with the media queries in css, but still can't get it to look right. I've pasted below the max width 1200px section. Any help would be much appreciated.
@media only screen and (max-width: 1200px) {.site-inner,
.wrap {
max-width: 960px;}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 740px;
}.content,
.site-header .widget-area {
width: 620px;
}.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.content-sidebar-sidebar .content {
width: 400px;
}.sidebar-primary,
.title-area {
width: 300px;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.title-area {
width: 300px;
}.footer-widgets-1 {
margin-right: 30px;
}}
http://www.narrowingthedistance.comMay 1, 2016 at 11:12 am #184767emasaiParticipantThe .title-area is set to 300px in the 1200px media queries. Just delete the mention .title-area as this rule also applies to the footer widgets and the primary sidebar.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMay 1, 2016 at 8:35 pm #184779jkcarrollMemberThanks emasai, that did the trick for the header, but it messes up the alignment of sidebar widgets when the screen is between 1200px and 960px. Thanks for sending in the right direction. I will continue to mess with it.
May 2, 2016 at 9:50 am #184810emasaiParticipantThat's because you probably removed the complete rule. Only remove .title-area from those 2 lines, otherwise you will effectively mess up the other elements which share the same code. E.G.
@media only screen and (max-width: 1200px)
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar-primary {
/* width: 300px; */
}
@media only screen and (max-width: 1200px)
.sidebar-primary {
/* width: 300px; */
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMay 2, 2016 at 10:12 am #184811jkcarrollMemberI tried two different things, but had the same problem with the sidebar widegts:
1.) I commented out .title-area like this:
.sidebar-primary,
/*.title-area*/ {
width: 300px;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
/*.title-area*/ {
width: 300px;
}2.) I tried commented out just the width like in your example, like this:
.sidebar-primary,
.title-area {
/*width: 300px;*/
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.title-area {
/*width: 300px;*/
}Thanks again for your help.
May 2, 2016 at 10:17 am #184812emasaiParticipantThe first trial is correct but you are leaving in the comma after .sidebar-primary
See in the code I sent I have removed the
, .title-area
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMay 2, 2016 at 10:21 am #184814jkcarrollMemberExcellent! Sorry I didn't catch that earlier. Thanks again.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.