Masthead resize in mobile view

johnbrks · 2016-05-09 05:09:42

My masthead displays properly in the desktop but seems to bee disproportionately shrunken when viewed ok my iPhone.
Any thoughts?
Www.joliverbrooks.com

Last edited by johnbrks (2016-05-09 11:27:56)

rod barbee · 2016-05-09 05:22:32

I think it's just sized proportional to the container.

rod barbee · 2016-05-09 05:32:00

you could try writing a media query for your custom css that would do this:

.masthead {
    padding: 0;
}

.masthead > .content {
padding: 0;
}

that would allow the masthead to fill the area, making the image a bit bigger.

johnbrks · 2016-05-09 10:19:36

thank you. i guess the container size is imposed in BL? i didn't specify the container size.

Matthew · 2016-05-09 10:37:59

You're using what amounts to a full-width banner. When your browser is 1280-pixels wide, then you're seeing that banner at its relatively natural size. When the browser is 320 or 414 pixels wide, as on a phone, and the banner is scaled to fit at that width, it's going to be smaller. I'd recommend using a smaller graphic, something more like what Lightroom uses for identity plates, rather than a full-width, graphic banner.

In a future update, I might consider allowing multiple images -- one for desktop, one for mobile -- so that you can specify separate versions for different screen sizes. But that's not something supported at the moment.

If you really want to keep the current banner in the meantime, then another alternative would be for you to get creative using PHPlugins and custom CSS to roll your own masthead.

johnbrks · 2016-05-09 13:58:40

thanks for the info. rod, what did you use? it scales fine in your backlight sample site.

rod barbee · 2016-05-09 21:33:07

My page width is 1140px
for the masthead section I zeroed out all padding
the graphic is 1144px wide (not exactly sure why I made it 1144px rather than 1140px. Probably just a slip of the keyboard...)

It looks like you've now eliminated the padding around your masthead so it should look a little larger on mobiles.

Community @ The Turning Gate

#1 2016-05-09 05:09:42

Masthead resize in mobile view

#2 2016-05-09 05:22:32

Re: Masthead resize in mobile view

#3 2016-05-09 05:32:00

Re: Masthead resize in mobile view

#4 2016-05-09 10:19:36

Re: Masthead resize in mobile view

#5 2016-05-09 10:37:59

Re: Masthead resize in mobile view

#6 2016-05-09 13:58:40

Re: Masthead resize in mobile view

#7 2016-05-09 21:33:07

Re: Masthead resize in mobile view

Board footer