Need help? Check out our Support site, then


Site title inconsistency

  1. I added this code for site title additional text, it worked perfectly in Chrome but the width constraint does not function in Safari, how can I stack this text in both browsers?

    .site-title a:after {
    content: "Leadership and Organizational Development";
    display: block;
    position:relative;
    top:70px;
    right:338px;
    font-family: calluna, times;
    font-size: 32px;
    word-spacing: -4px;
    font-style: none;
    text-transform: none;
    color: #555;
    width:20%
    }

    The blog I need help with is lisarhodeconsulting.com.

  2. Lisa, where do you want that to appear? Right now with the code you have, it is appearing at the very left of the browser window due to the position: relative, top and right declarations.

  3. I put the original code in for you to see, it looks correct in Chrome, and it is how I want it to look, however, it is not in the correct position in Safari. The code above was adjusted for Safari.

  4. Lisa, I'm seeing it the same right now in Chrome, Safari and Firefox, and in all of them, when I adjust browser window width, the site title, your added text and the site description all seem to flow the same.

    At narrower browser window widths, I do see that the title, description and your added text become very difficult to read due to it overlaying your header image.

  5. Hmmmm, I was changing code when you were looking at it, would you check again and see if now they all flow the same?

  6. Lisa, ASSESS. DESIGN. DELIVER. disappears down behind the page content and outside the left margin of the browser window when I narrow my browser window down on all three browsers.

    "Leadership and Organizational Development" flows well in all of them though.

    I've tried several things and haven't been able to get all three to flow correctly together. I'll work on it some more though and see what I can come up with.

  7. Ok, thank you.

  8. Lisa, I'm still working on this. It is difficult to get everything to flow as it should. I'm signing off for the evening, but will work on it again tomorrow morning.

  9. Ok, thank you.

  10. While you are checking, I added a line below and want it want it constrained to the width of the text.
    Thanks.

  11. Lisa, I haven't forgotten you. I'm working on your site header area in my test site. It is somewhat challenging.

  12. ok, thanks I am including limiting the width of the gray line above leadership and organizational development.

  13. Lisa, take a look at my test site. The header area is not complete yet, but I wanted you to take a look at it. I'm still trying to figure out the transition when the text moves over the top of the image as it will have to change colors so that it is all legible for your visitors.

  14. Thanks, if it is not possible it is ok. However, I would like to be able to limit the width of the line that I put in above Leadership and Organizational Development.

  15. Lisa, I just wanted to let you see what I had so far and see if my approach will work for you. I'll work on limiting the line width and then work on integrating all of it into your custom CSS.

  16. Great, thank you.

  17. How is the line width coming, does it seem that it will work with the Sight Theme?

  18. I would like to be able to limit the width of the line that I put in above Leadership and Organizational Development.

    In your custom CSS, you're using the :after pseudo element to add in some text below the site title using this selector:

    .site-title a:after

    In that block, the width is set to 300% like this:

    width:300%;

    I think you should remove that.

    If you remove the 300% width for the :after pseudo element, then the width of it is inherited from the .site-title element. In your custom CSS, you have set the width for the .site title element to 12% with this rule:

    .site-title {
    	width: 12%;
    }

    One really good way to visualize changes when working on an issue like this is to temporarily add borders to the elements you're working on. Here is a CSS example you can add just in the Appearance > Customize > CSS editor without saving to use as a guide:

    /* Following are some temporary CSS borders.
       You should only use them in the preview without saving them.
       hgroup is the parent element for the site title and description */
    hgroup {
    	border: 2px dashed white;
    }
    .site-title {
    	border: 2px dashed yellow;
    }
    .site-description {
    	border: 2px dashed turquoise;
    }

    Once that has been added (but not saved) in the Appearance > Customize > CSS editor, collapse the CSS editor by clicking CSS on the right and then use the tablet and mobile buttons at the bottom of the live preview to see how those elements change at different screen widths. Do you see how a 300% or 12% width for the site title aren't good?

    So, looking at those tablet and mobile previews, it's clear that in the updates you've made so far, some were intended for the full screen width and some weren't. There are a couple different routes you can take to fix this. One would be to apply all the changes you've added so far only to large screens, then add additional media queries to make just the adjustments you want over again for small screens. Another route would be to take out all of the CSS and apply it back again one step at a time making sure to check the mobile views each time and determine which rules should be limited to smaller views and which shouldn't.

    Either route will take a bit of work to untangle. :) But that's okay! We'll help you through it. I would like to help you one step at a time though, and you've got to make sure you have a clear understanding of how media queries work as a first step.

    Based on what I see on your site right now, I came up with an example that will fix the layout for the site title, the border and text after the site title, and the site description — but only for large screen views because it's a good enough place to start and because how to proceed next will depend on whether you decide to untangle the current CSS from the responsive design views (small screen/mobile views) by starting over or whether you want to continue with adjustments based on the CSS you've already added.

    Some caveats: the following CSS works only for your site and it is based on the current state of the other custom CSS currently saved in your site. This example may not be any good if you change your other saved CSS from this point forward. Because of that, this example is just a starting point.

    Here we go:

    First, find “.site-description” in your current custom CSS, and remove the “top” and “right” properties.

    Then add this to your Appearance > Customize > CSS editor:

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

    What this example does is update both the site title and description widths to 33%. It also changes the add-on text below the site title to a 100% width because it is a child of the site title element and so 100% for the add-on text means it fills up the 33% parent element and becomes 33% of that elements parent container. It also removes floats and resets margins to match and adjusts the margins from 4.4something% to 3.6%. I picked 3.6% because that seemed to work best at browser widths of 1065px and wider. The absolute positioning for the site description sticks it to 20px up from the bottom of its container element which is the hgroup element in this case.

    This is a lot of information! So try the examples from this reply first and then I'll try to work through any questions you have about media queries next because you'll need to know how they work in order to proceed. Here's a video I found in a search that tries to explain media queries a bit—I thought you might like to check it out:
    http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531

    This is another good article about media queries if you're interested:
    http://alistapart.com/article/responsive-web-design

  19. Great, thank you for all that.

    I checked out the video and article and now better understand media queries and responsive themes. I look forward to the next steps to see how they correlate to questions I have with this new information.

  20. I am going to apply all the changes to large screens. I am working on the header issue; the bulleted list of services on the Welcome Page and the Services Page are next.

  21. 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.

  22. 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?

  23. 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?

  24. 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.

  25. 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" */
    }
  26. ok

  27. 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?

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

    Thanks!

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic