Site title inconsistency

  • Author
    Posts
  • #1661724

    Sounds good! I’m not sure whether separate help requests would be better in this case or not since one change might build on another. Let’s keep working in this thread for a little while until it gets too long or until the questions become easier to manage separately.

    I am going to apply all the changes to large screens.

    Do you know how to do this or do you need help with that bit?

    I am working on the header issue; the bulleted list of services on the Welcome Page and the Services Page are next.

    Let me know when you get to a point where you need help on the header issue.

    #1661727

    lisarhode
    Member

    I am working on the header and targeting the line and the “after” text below the line so that Leadership and Organizational Development are on one line and the line above it ends at the “t” in Development. Changing the media query width solves for the “after” text one but does not solve for the gray line.

    this is what I did:

    I removed this code because it did not change anything when I varied it:
    .site-title {
    width: 12%;
    }

    I also noticed that the width in a:after does not effect the necessary adjustment:
    .site-title a:after {
    width:300%;
    }

    I changed the media queries to the increased width of 110%

    @media only screen and (min-width: 1065px) {
    .site-title a:after {
    width: 110%;
    }

    What is next?

    #1661728

    I think we should put a basic media query structure in place next.

    If you want to read up on how they work first (I think that would help a lot), then this might be a good post to read as a primer if you’re interested:
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Let’s use the same break points (those are the widths the media queries setup with) that the theme uses. Look in this stylesheet and find the =Responsive Structure” section:
    https://s1.wp.com/wp-content/themes/pub/sight/style.css?m=1386301037g&minify=false

    You can copy the same media query structure and use the same widths that the theme is using. Here’s a copy of just the @media sections:

    @media only screen and (max-width: 890px) {
    	/* your css goes here */
    }
    
    @media only screen and (max-width: 768px) {
    	/* your css goes here */
    }
    
    @media only screen and (max-width: 680px) {
    	/* your css goes here */
    }
    
    @media only screen and (max-width: 480px) {
    	/* your css goes here */
    }

    Add those to the bottom of your custom CSS.

    If you want to use different break points (max-widths) later, you can decide to change them at some point to fit other customizations you want to make. But to start, I would stick with the theme-defined max-widths.

    Now, what you should do next is go through all of your current CSS and decide which bucket it goes in. Some can be removed. You can start with all of the other @media blocks you’ve added.

    This one isn’t being used so you can delete it:

    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
    	/* Styles */
    
    }

    Next let’s remove the media query from here because we’re going to incorporate it into the other structure outlined above. Look at this block:

    @media only screen and (min-width: 1065px) {
    	.site-title a:after {
    		width: 110%;
    	}
    
    	.site-title,.site-description {
    		float: none;
    		display: block;
    		margin: .1em 0 .1em 3.6%;
    		padding: 0;
    		width: 33%;
    	}
    
    	.site-description {
    		position: absolute;
    		bottom: 20px;
    	}
    }

    You’ll want to leave it in the exact same place it’s in now because the order CSS is in matters a lot. So, leave it where it is but remove this line:

    @media only screen and (min-width: 1065px) {

    And remove the curly brace from the end of that block:

    }

    Next, find this:

    @media screen and (max-width: 768px) {
    	#secondary, .site-content {
    		width: 100%;
    	}
    
    	.widget, #band {
    		width: 96%;
    	}
    }

    That’s one of the theme’s break points. So move that whole thing to the media query structure at the bottom, replacing this:

    @media only screen and (max-width: 768px) {
    	/* your css goes here */
    }

    Next, find this:

    @media screen and (min-width:769px) {
    	#recent-posts-2 {
    		float: left;
    		position: relative;
    		top: -625px;
    		font-family: Arial;
    		color: #B32E02;
    	}
    }

    Do you really need that? I don’t see anything on the site that it’s affecting. Is it leftover from a past change an you no longer need it? Maybe I just didn’t find the page it affects? What are you trying to do with that CSS block? If you’re not using it, can you just remove it?

    Now, what I would recommend next is going through all of the custom CSS you have left step by step and putting it in the best place based on what each piece of CSS code is trying to do.

    This step is going to take A LOT of work. Let’s start small.

    Look at this:

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

    What it does is make the header container area 100% wide and move the background image to the top right. But! The theme has it’s own ideas for that in the built in media queries. If you right click on the hgroup element and click “Inspect Element,” you’ll see that inside the “max-width: 890px” @media block there’s a max width set for hgroup that makes it about 40% wide for any views that are 890px or smaller.

    Here is an example showing how that width is interpreted by Chrome. I’ve used Chrome’s built in web inspector to see the CSS being applied:
    https://i.cloudup.com/3figuam6BT.png

    So to counteract that and make the width 100% instead of ~40%, you can find the block for “@media only screen and (max-width: 890px)” and add this inside of it:

    .site-header hgroup {
    	max-width: none;
    }

    Now, compare the tablet-sizes and regular-sized views using the icons at the bottom of the live preview in Appearance > Customize to see the difference it makes.

    With me so far?

    #1661731

    lisarhode
    Member

    Yes, I am with you with a question or two,

    “Now, what you should do next is go through all of your current CSS and decide which bucket it goes in.”

    What does bucket mean? Can you give me an example of putting my CSS into a bucket?

    Great.

    #1661732

    What does bucket mean? Can you give me an example of putting my CSS into a bucket?

    That’s just me being me. :) I meant “buckets” as a metaphor for different sections of CSS such as the various media queries for small, medium, and large browser widths.

    For example, you might want the site title and tagline to only be 30% wide on large screens but you want it 100% wide on very small screens like mobile phones. In that case, you might put one of the rules in the “small screen bucket” and another in the “large screen bucket.”

    When it comes to media queries, they’re very clearly defined sections. Example:

    @media only screen and (max-width: 480px) {
    	/* all the css inside the @media curly braces "{" and "}" here will only get applied if someone is viewing with a device that is 480px wide or smaller, you could think of this as the "small screen bucket" */
    }
    #1661733

    lisarhode
    Member

    ok

    #1661734

    When you’re ready, let me know what you want to work on next. Do you want to look at improving the header for tablet and mobile views next?

    #1661736

    lisarhode
    Member

    Next, I want to make sure the site is optimized for screens with a minimum width of 1065px and start with the header.

    Thanks!

    #1661737

    lisarhode
    Member

    Yes, I am with you so far.

    I believe this was from a previous edit when I thought we were ready for blog posts and I moved the post title from the sidebar near the second navigation menu for consistency.

    @media screen and (min-width:769px) {
    #recent-posts-2 {
    float: left;
    position: relative;
    top: -625px;
    font-family: Arial;
    color: #B32E02;
    }
    }

    Next, I made the initial media revisions including moving the background image for the responsive design but the image didn’t reposition to the top right, am I supposed to leave in or remove the curly brace when I move the code to the bucket?

    this is how I moved it:

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

    #1661738

    If you don’t know what this is for, just delete it. We can add back another rule in the right place later if we figure out it was needed after everything has been shuffled.

    @media screen and (min-width:769px) {
    	#recent-posts-2 {
    		float: left;
    		position: relative;
    		top: -625px;
    		font-family: Arial;
    		color: #B32E02;
    	}
    }
    #1661739

    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.

    #1661741

    lisarhode
    Member

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

    #1661742

    lisarhode
    Member

    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.

    #1661743

    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.

    #1661744

    lisarhode
    Member

    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;
    }

    #1661745

    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?

    #1661746

    lisarhode
    Member

    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?

    #1661747

    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.

    #1661750

    lisarhode
    Member

    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.

    #1661751

    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?

The topic ‘Site title inconsistency’ is closed to new replies.