[Suits Theme] Separate header image for mobile only?
-
Hello, I’ve had this problem ever since I launched the site. I want my header image to be responsive on desktop first and foremost. So in order to achieve that, I was given CSS code that placed a huge black space at the top of my site on mobile. Desktop looks fine and does what I want, but mobile looks poor.
I’m wondering if there is a way to keep my desktop header image the same and use the image at the below link as a header for MOBILE ONLY? I’ve been searching for this answer or at least something similar for so long. Please help!
The blog I need help with is: (visible only to logged in users)
-
If nothing else, I’d at least like to reduce the black space above the header on the mobile layouts.
-
Hi there, the mobile header image you have is way too large to use for the mobiles. We also have to determine what “mobile” means. Are we only going to worry about 320px wide screens (iphone portrait), or do we also want to cover 480px wide screens (iphone landscape) The iPhone 6 + is 414 x 736.
May I make a suggestion? The dark background would be added as a separate image in .site-header. The logo you have now in the center of that image would be pulled out in an image editing program and saved as a png (one for non-hover and one for hover) with no background (transparent). The darker image would be set to a background size of “cover” and then we would size the .home-link div to hold the logo. and set it for a background size of contain. Since it is close to the size of a mobile (500px x 300px) it would probably look very good on mobile devices.
Let me know what you think, and if you wish to proceed, upload the images to your media library and post the URLs of those images and we can get to work on making that happen.
-
First of all @thesacredpath, thank you! Ok, It’s been a while since I’ve done CSS at this level, so please be patient with me. I am about to head out, but I will make some adjustments in Photoshop, upload the files and provide you think links so we can make this CSS magic happen.
I’ll be back with those later tonight, so please keep your eye on this thread either tonight or tomorrow. Thank you!
-
- The topic ‘[Suits Theme] Separate header image for mobile only?’ is closed to new replies.
WordPress.com Forums 