Site title inconsistency

  • Author
    Posts
  • #1661467

    lisarhode
    Member

    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.

    #1661557

    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.

    #1661569

    lisarhode
    Member

    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.

    #1661570

    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.

    #1661572

    lisarhode
    Member

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

    #1661576

    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.

    #1661580

    lisarhode
    Member

    Ok, thank you.

    #1661583

    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.

    #1661592

    lisarhode
    Member

    Ok, thank you.

    #1661595

    lisarhode
    Member

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

    #1661667

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

    #1661689

    lisarhode
    Member

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

    #1661698

    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.

    #1661702

    lisarhode
    Member

    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.

    #1661703

    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.

    #1661707

    lisarhode
    Member

    Great, thank you.

    #1661716

    lisarhode
    Member

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

    #1661721

    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

    #1661722

    lisarhode
    Member

    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.

    #1661723

    lisarhode
    Member

    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.

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