Need help? Check out our Support site, then


Site title inconsistency

  1. http://lisarhodeconsulting.com/

    This is the rule that makes the background image move to the top right:

    .site-header hgroup {
    	background-position: right top;
    	width: 100%;
    }

    You don't want remove that one.

    The other rule you mentioned:

    @media only screen and (max-width: 890px) {
    	.site-header hgroup {
    		max-width: none;
    	}
    }

    will counterbalance the first rule. It's hard to spot. You need to have both rules and then look at both small and large screen sizes to see the difference.

    It might be too much too fast though. You can just add back the first rule for now and that should be good enough at this point.

  2. No it is not too fast, I added it. Is there a way to limit the gray line with media query?

  3. The question I have with the gray line is how to code so that it ends at the letter "t" in "Leadership and Organizational Development" for the large view.

  4. Lisa, in your .site-title a:after rule change the width you have set (currently 110%) to 95% to get the grey line to end at the end of the text below. View it in at least a couple different browsers at full width to make sure 95% is enough on the width. Different browsers render text a little differently and one may show it longer than another.

  5. Thank you with some adjustment it is great.
    Now I am working on the title in the header, is there a redundancy here? When I move this to the 890px bucket and adjust the font the title does not respond.

    .wf-active .site-title, .wf-active .site-title a {
    padding-top: 20px;
    font-size: 26px;
    }

    .wf-active .site-title a {
    font-style: none;
    font-size: 1.6em;
    color: #452532 !important;
    text-transform: none;
    }

  6. I suspect you put it into a media query block (a bucket) for max-width: 890px, but if you want it to apply to large screens only, you should put it into a media query using min-width not max-width, like this:

    @media only screen and (min-width: 890px) {
    	.wf-active .site-title, .wf-active .site-title a {
    		padding-top: 20px;
    		font-size:26px
    	}
    	.wf-active .site-title a {
    		font-style: none;
    		font-size:1.6em;
    		color:#452532 !important;
    		text-transform:none
    	}
    }

    However, think about what that CSS does. Would you want it to apply to every screen size? If so, then that particular CSS should be left outside of any media query that limits it to a certain screen width. See what I mean?

  7. I have .site-title a:after coded for additional text and a pixel line, it responds to the theme when I put it in the max-width 890px bucket, the title without a:after does not. It seems that both the title and a:after should respond the same. I coded it this way to have different text in the header, could the additional code be effecting the response?

  8. Lisa, can you explain what you want to happen with each line of text in the header area? Title, your added text and the tagline? How do you want them to flow and display at smaller screen sizes? Right now the title and site description/tagline seem to be flowing and adjusting nicely, at least to me.

  9. lisa rhode consulting should be stacked so that lisa rhode is on top of consulting, the gray line is below lisa rhode consulting, leadership and organizational development is below the gray line, and ASSESS. DESIGN. DELIVER. is below leadership and organizational development. All this content should be in the lavender area of the header. When I check size in Chrome, tablet view lisa rhode consulting does not resize to the media query as desired to a smaller font size with the text confined to the lavender area so that it does not overlap the image and stays stacked.

  10. Thanks for the clarification. I've played around with your site and think it is going to require at least a couple more buckets. At about 740px browser window width, the area for the header text becomes quite narrow. What do you want to happen when there isn't enough room to the left of the image for your header text?

  11. When there isn't enough room to the left of the image for the .site-title header text the text should be smaller so that it stacks above .site-title a:after.(leadership and organizational development)

  12. lisa rhode consulting should be stacked so that lisa rhode is on top of consulting, the gray line is below lisa rhode consulting, leadership and organizational development is below the gray line, and ASSESS. DESIGN. DELIVER. is below leadership and organizational development. All this content should be in the lavender area of the header.

    Okay. First, since the "Leadership and Organizational Development" text should be present in all screens, it should go at the top outside any of the @media sections.

    Currently, you have three separate rules for ".site-title a:after", this on is at the top outside of any @media section:

    .site-title a:after {
    	width: 90%;
    }

    This one is in the "min-width: 890px" (large screens bigger than 890px) @media section:

    .site-title a:after {
    	content: "Leadership and Organizational Development";
    	width:180%;
    	border-top:4px solid #999 !important;
    	display:block;
    	position:relative;
    	top:8px;
    	font-family:calluna, times;
    	font-size:15px;
    	word-spacing:.5px;
    	letter-spacing:.75px;
    	font-style:none;
    	text-transform:none;
    	color:#452532;
    	line-height:2em
    }

    And this one is in the "max-width: 890px" (screens smaller than 890px) @media section:

    .site-title a:after {
    	content: "Leadership and Organizational Development";
    	border-top:4px solid #999 !important;
    	display:block;
    	top:8px;
    	font-family:calluna, times;
    	font-size:20px;
    	word-spacing:4px;
    	color:#452532;
    	line-height:1.2em;
    	padding-top:5px;
    }

    Now, if you want the "Leadership and Organizational Development" text to be present in all screen sizes, you can put the rule for that outside of @media sections and then adjust sizes for things using @media. Let me show you how.

    First, let’s add a way for you to visualize each of the site title sections as screen sizes change. This should only be in the preview without saving. Add this to the bottom of all the CSS—you will remove it later before saving, just add it now so you can see the blocks of what you’re working on:

    /* Remove this before saving */
    .site-title { background: yellow; }
    .site-title a { background: pink;}
    .site-title a:after { background: aliceblue;}

    Now check the desktop, tablet, and mobile previews to see how each piece changes in the current configuration.

    Remove all the “.site-title a:after” rules you have now.

    Remove this

    .wf-active .site-title, .wf-active .site-title a {
    	width: 220%;
    	font-style:none;
    	padding-top:10px;
    	font-size:12px;
    	line-height:1em;
    	width:50px;
    	color:#452532 !important;
    	text-transform:none
    }

    Remove this

    .wf-active .site-title, .wf-active .site-title a {
    	padding-top: 20px;
    	width:150px
    }

    Remove “width: 33%” from the rule for “.site-title, .site-description”

    Add this somewhere in the top section outside of the @media sections:

    .site-title {
    	width: 270px;
    	line-height: 1;
    }
    .site-title a,
    .site-description {
    	color: #6a5262 !important;
    }
    .site-title a:after {
    	content: "Leadership and Organizational Development";
    	/*width:180%;*/
    	border-top: 4px solid #999 !important;
    	display: block;
    	position: relative;
    	top: 8px;
    	/*font-family: calluna, times;*/
    	font-size: 15px;
    	word-spacing: .5px;
    	letter-spacing: .75px;
    	/*font-style:none;*/
    	text-transform: none;
    	/*color:#452532;*/
    	line-height: 1.4em;
    }

    Note: I left in some comments for the things I wanted to remove so you can see what I changed. The width part for a:after doesn’t make sense here if you set the width for .site-title correctly above. The font-family rule isn’t needed because the font is inherited from the parent element. The font-style:none rule is incorrect syntax and wasn’t changing anything. The color rule isn’t needed because it’s being inherited from a parent element. And I changed the line height to 1.4em because I thought it looked better that way.

    Check the desktop, tablet, and mobile previews to see how each of those things look with the changes so far.

    Add this to the “@media only screen and (max-width: 890px)” section:

    .site-title {
    	line-height: .75em;
    	width: 175px;
    }
    .site-title a {
    	font-size: 40px !important;
    }

    Check the desktop, tablet, and mobile previews again to see what has changed.

    Remove the background colors from the bottom.

    Check the desktop, tablet, and mobile previews again to see what has changed.

    Some caveats: this is not a perfect solution for every screen size possible, but it’s a really good start. What I’m hoping is that walking through the changes instead of giving you the answers straight out will help you get a good, basic understanding of media queries so that future changes you make won’t just keep breaking things in different screen sizes like they were before.

    If you try the changes above and like how it’s going, let me know when you’re ready and we can look at the site title section for mobile screen sizes next.

  13. Great.
    I like it what is happening though it appears that the width discrepancy between site-title (or site-title a) and site-title a:after is not fixed, is this true?

  14. True! They were based on percentages before, and that's part of why they were looking funny at different browser widths. 30% wide on mobile is really small! That's also why I went for a wider fixed width of 270px for the .site-title in my latest example an left the other pieces (.site-title a and .site-title a:after) alone—you don't need to change the width for those at all if you set it once for the parent element (.site-title in this case). The next step will be to perhaps adjust the 270px to something larger in smaller screen sizes (maybe even 100%?). Are you ready for that step now?

  15. Yes, this is what I added, is this what you were referring to?

    .site-title {
    width: 30%;
    }

  16. Indeed. 30% is variable, so it will be a different width depending on the viewer's display size and browser width.

    What you should do is pick a size that you like for large screens and use that in the first ".site-title" rule at the top.

    I just checked your custom CSS and I see that you put the 30% width rule in the "max-width: 890px" section, which means the site title will be 30% wide on screens smaller than mobile screens. That seems backwards to me—do you want that block of content to only be 30% wide on mobile?

  17. I changed things so the site-title and site-title a:after is where I want it for large screen. When I check it with the design tools for tablet it looks good. I took the next step to code for the sidebar so that it is next to the main content and not below, which it was defaulting to, this is how I did it:

    @media only screen and (max-width: 890px)
    #secondary {
    position: relative;
    float: right;
    bottom: 530px;
    width: 30%;
    }

    it looks right when I check it in tablet view, but is the coding correct?

  18. Hold on! I think we should finish the work with the site-title first. It doesn't look right on mobile, and there are some extra "!important" rules further up in your custom CSS that I would suggest removing.

    I consider this a teaching step, and I hope by the end you will have a better understanding of media queries so that future CSS rules you add on your own won't break the various views like tablet and mobile like they were breaking before. I feel that we've gotten pretty deep into it! And I hope it has been helpful so far. If you ever get frustrated, we can always go back and try a different route which would be to limit all of your custom CSS to the desktop view only and let the theme decide how the tablet and mobile views should look. (Keep this option in the back of your mind if the teaching steps I'm posting here get to be too much!)

    Okay, so, here's what I would recommend for the site title on the mobile view:

    Find the "@media only screen and (max-width: 480px)" block in the bottom of your custom CSS and add this inside of it.

    .site-title {
    	width: 170px;
    }
    #masthead .site-title a {
    	color: #fff;
    }
    .site-title a:after {
    	width: auto;
    	border-top: 4px solid #fff !important;
    	color: #fff;
    }

    What this should do is set a fixed width for the site title on small screens and also turn all of the text as well as the border color white. However, the "lisa rhode consulting" site title text doesn't change color. That is happening because you've added "!important" in various places in your CSS above. Sometimes "!important" is needed, but if it isn't really needed then it can really get in the way when working with media queries—and that's what's happening here. To fix the problem, go back through all of your current custom CSS, find the ".site-title a" rules and remove "!important" from any lines that affect the color.

Topic Closed

This topic has been closed to new replies.

About this Topic