cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution

Lyrical Theme WordPress Head Image Mobile

What is going on everyone.

 

Here is the issue I'm having. I'm currently working on setting up a site for a client using the Lyrical theme. The one issue I have is that the header image doesn't scale properly and per client request the image is cut off.

 

I was wondering if there was any css that could fix this issue, I just want the original image to show on mobile. Desktop and Tablet sizing is fine with the current settings, mobile is just zoomed in a ton and you can't see what the image is about.

 

Thanks

7 REPLIES 7
Resolver I

Re: Lyrical Theme WordPress Head Image Mobile

If you can provide a URL it would be easier to help you with some CSS to fix the mobile issue.

Re: Lyrical Theme WordPress Head Image Mobile

http://gms.f21.myftpupload.com

 

Temp URL right now until we port over their other one.

 

Thanks mhason

Resolver I

Re: Lyrical Theme WordPress Head Image Mobile

Go to "Appearance -> Customize", select the custom CSS tab at the bottom and insert this:

 

@Media screen and (max-width: 768px) {

    .site-header { max-height: 300px; }

}

 

This will make your header background image shrink but you are still going to have some issues with the headline size, line height etc. because the background image ratio doesn't really fit to a portrait layout.

 

In such case I would create 2 images, one that fits a desktop layout (landscape orientation) and one that fits a mobile layout (portrait orientation) and switch the background image according to the device using css media queries.

Highlighted

Re: Lyrical Theme WordPress Head Image Mobile

For having the 2 Images, what CSS would I need to use in order to run two images? Since the theme allows only for 1 to be uploaded through the customize section

Resolver I
Solution

Re: Lyrical Theme WordPress Head Image Mobile

@Media screen and (max-width: 768px) {
.site-header { background-image: url(URL-TO-IMAGE); }
}

Re: Lyrical Theme WordPress Head Image Mobile

Awesome thanks so much. That seemed to help a ton. Now just to figure out the Homepage header sizes to have the image not cut off!

Resolver I

Re: Lyrical Theme WordPress Head Image Mobile

You are welcome!
If this resolved your issue please mark the topic as resolved.

Thanks