Suits Theme – Header Not Responsive… yet

  • Unknown's avatar
    bobbyhearn · Member ·

    Hello – I recently removed the header image on my site because I wanted it to have a hover effect. In order to accomplish this, I was given a CSS fix to make my header a link and then a hover link. However, this caused a new problem – my header is no longer responsive. I need a way to keep the hover effect on the header, while also making sure it is responsive on desktop and mobile… or at least desktop.

    I was told the min height declaration of 200 px might be a problem. I will make whatever fixes needed. Just please guide me. Also, is there a way you can look at this while I keep my site private? I’d be happy to add you as an editor if you provide me with an email. Let me know, if not I’ll put it online.

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    Could you please make me the viewer of your blog. I just need to look at your site (and header) , no need to edit it to be able to provide the CSS :-)

    My WP.com user id is chaitanyamsv. I can’t guarantee the solution but I will try my best.

  • Unknown's avatar
    bobbyhearn · Member ·

    chaitanyamsv – invitation sent!

  • staff-happychia · Staff ·

    Thanks for the invite.

    We can enclose your current styles in between media queries to restrict this hover effect to desktops.

    @media screen and (min-width: 960px) {
.site-header .home-link {
    min-height: 220px;
    background: url('https://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg') no-repeat scroll top
}
}

@media screen and (min-width: 960px) {
.site-header .home-link:hover {
    background: url('https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg') no-repeat scroll top
}
}

    How do you want your header on the mobile screens?

  • Unknown's avatar
    bobbyhearn · Member ·

    chaitanyamsv – I haven’t checked your CSS yet, but I wanted to answer your question before I head to bed. That’s a good question and because I’m not good at CSS, I’m going to provide you a (bad?) answer: I want it to look good. Normal. Whatever you think would be best. I trust you. You steered me in the right direction last time. I will try the CSS above tomorrow and get back to you in this thread. Perhaps you’ll have a mobile CSS solution by then! Thanks friend.

  • staff-happychia · Staff ·

    No worries.

    I can think of two options.

    [1] Don’t add any media queries and add the following rule to the existing styles.
    max-width: 100%;

    So they become: 

    .site-header .home-link {
max-width: 100%;
    min-height: 220px;
    background: url('https://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg') no-repeat scroll top
}

.site-header .home-link:hover {
max-width: 100%;
    background: url('https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg') no-repeat scroll top
}

    The result is that background image is displayed on mobile screens but it is cropped.

    [2]

    a) Add FIVE STAR SODA as site title and Crafted Brewed. Crafted Reviewed. as site description.

    b) From Dashboard > Appearance > Header > Select the checkbox in the Header Text field. This makes the site title and description visible but we will use the following CSS to hide them on larger screens:

    @media screen and (min-width: 960px) {
 .home-link .site-title, .home-link .site-description {
     display:none;
}
}

    and use media queries to display images only on large screens: 

    @media screen and (min-width: 960px) {
.site-header .home-link {
    min-height: 220px;
    background: url('https://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg') no-repeat scroll top
}
}

@media screen and (min-width: 960px) {
.site-header .home-link:hover {
    background: url('https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg') no-repeat scroll top
}

    This way we have image on large screen but site title and description on smaller screens.

    Please try these options and let me know what you think :-)

  • Unknown's avatar
    bobbyhearn · Member ·

    chaitanyamsv – I don’t think I was specific in what I meant about my header not being responsive. This is my fault. What I mean is this… when I shrink down the size of my browser, my header does not shrink in accordance with it like the body of text in the the posts does. Does this make sense? When I go to the lower right hand corner of my browser and select it, slowly shrinking it, eventually the header just becomes cut off instead of responding and shrinking in proportion to the browser size. So I need that to happen both on desktop and mobile. Can you help me with that? I apologize for my sloppy explanation initially. Your help is tremendously appreciated!

  • staff-happychia · Staff ·

    I understand what you mean.

    But as @thesacredpath mentioned on the similar thread,

    The Suits theme header was not designed with having text within the image, such as what you have. It was designed to have a background image to the text-based title and description, something like on this site: http://santabarbariansandtheircars.wordpress.com/ . That said, we can make some adjustments in the CSS and make the header image resize with the screen/window size, but in doing this, we are relying on the browser to resize the image, and on small tablets and phones, the image is going to be small and fuzzy and not really readable.

    So it seems having a header image with text on Suits theme is not a good idea. I tried something and found that the header shrinks and is not really readable.

    Are you happy to live with option [2] in my previous update? So the on desktops header image will appear with hover effect. On mobiles and tablets, header will disappear and site title and description will appear.

    What do you think?

  • Unknown's avatar
    bobbyhearn · Member ·

    So there is no way on mobile to make the header with hover effect viewable without being cropped?

  • Unknown's avatar
    bobbyhearn · Member ·

    What about this:
    Can we a.) keep the hover effect restricted only to desktop?
    and then b.) Use the ONLY header image at the link ‘http://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg’ as the header for mobile? This way there would be a hover effect for desktop and no header effect for mobile, but mobile would still have a header image.

    It’s important to me for users to see the bottle caps in the header, so I’d rather not have the header disappear to show only text. I’d like to know first if this is possible, and if yes, can you do it to where the headers shrink in proportion with the windows they are being viewed in. Basically, I just don’t want them cut off.

  • Unknown's avatar
    bobbyhearn · Member ·

    What do you think, chaitanyamsv?

  • staff-happychia · Staff ·

    I looked at this last night but haven’t found a solution :-(

  • Unknown's avatar
    bobbyhearn · Member ·

    No worries. Is there still hope? I can wait a couple more days if needed.

  • Unknown's avatar
    designsimply · Member ·

    One possible solution would be to use the background-size property:
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

    The “contain” value means that the image will be scaled to fit inside the containing area. The problem with this, and where media queries need to come in, is that the width and height of the containing area in this case must be set manually (because you’re using a background image and the HTML element therefore does not know the size of the image) and the image will fit to the width but vary in height because the aspect ratio of the image is maintained. Using the “cover” value will scale the image to fill the space of the container element, however, the image will be clipped accordingly in order to fill the space. The best way to understand how this works is by looking at t demo:
    http://davidwalsh.name/demo/background-size.html

    To get around the problem, you can try to approximate the height at various breakpoints (meaning, change the height of the container manually for a few different common screen sizes). It’s not perfect, but I think it’s the best you can do within the limitations of using a background image as a header image.
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    I’ve created an example you can try.

    Remove this:

    .site-header {
	height: 220px
}

    In the following, change “min-height” to “height”

    .site-header .home-link {
	min-height: 220px;
	max-width:100%;
	background:url('https://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg') no-repeat scroll top;
}

    Add this:

    @media only screen and (max-width: 959px) {
	.site-header .home-link {
		height: 176px;
	}
}

@media only screen and (max-width: 640px) {
	.site-header .home-link {
		height: 132px;
	}
}

@media only screen and (max-width: 480px) {
	.site-header .home-link {
		height: 95px;
	}
}

    You can adjust the numbers in the media queries to your liking. I just picked what I thought looked good while I was testing.

  • Unknown's avatar
    bobbyhearn · Member ·

    designssimply – I think I correctly implemented the changes you asked me to put in, but I’m not seeing how that changed anything. I could be wrong because I’m not totally savvy with CSS, but the header still looks horribly cropped out when I switch to mobile and tablet views. On mobile, all I see is the word “Star” in the header. Did I do something wrong?

  • staff-happychia · Staff ·

    This has been my observation as well. The header is still cropped.

  • Unknown's avatar
    bobbyhearn · Member ·

    Designsimply – what do you think?

  • Unknown's avatar
    bobbyhearn · Member ·

    Is it possible to just put in some CSS that uses a different header image for Mobile/tablet only? I’d like to use the image at this link for mobile as my header: https://fivestarsoda.files.wordpress.com/2015/02/square-logo.jpg

  • Unknown's avatar
    designsimply · Member ·

    My apologies. It’s possible I copied something from my test incorrectly. I also noticed that you have made several revisions to your CSS since I posted before, so that example will no longer work anyway.

    Let’s start again.

    I noticed the hover effect is gone from the image. I’m not sure how you added that before or what the details were.

    Here is another approach to making the header background image pseudo responsive. This requires that you remove all of the “site-header” CSS rules from your current custom CSS or the example will not work. I tested it a few times, so I think it will work for you if you adjust your CSS correctly.

    #navbar {
	position: absolute;
	bottom: -36px;
}

.site-header {
	background-size: contain;
	background-position: center;
	position: relative;
}

@media screen and (max-width: 640px) {
	.site-header .home-link {
		min-height: 140px;
	}
}

@media screen and (max-width: 480px) {
	.site-header .home-link {
		min-height: 105px;
	}
}
  • Unknown's avatar
    bobbyhearn · Member ·

    I took the hover effect away because I panicked because these site has to launch in two days. I REALLY want the hover effect. The CSS you just provided works, but of course, no hover effect. Can you re-add the hover effect to the existing CSS to where it is still responsive?

    This was the CSS pertaining to the hover effect:

    .site-header {
    height: 220px;
    }

    .site-header .home-link {
    min-height: 220px;
    }

    .site-header .home-link {
    background: url(‘http://fivestarsoda.files.wordpress.com/2015/01/cropped-header-final31.jpg’) no-repeat scroll top;
    }

    .site-header .home-link:hover {
    background: url(‘https://fivestarsoda.files.wordpress.com/2015/02/header-final-scroll.jpg’) no-repeat scroll top;
    }

1 2 3
  • The topic ‘Suits Theme – Header Not Responsive… yet’ is closed to new replies.