Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Masthead resize in mobile view

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 15,060
Website

Re: Masthead resize in mobile view

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Pangolin test site, Backlight 1.1.1 test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 15,060
Website

Re: Masthead resize in mobile view

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Pangolin test site, Backlight 1.1.1 test site

Offline

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

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: Masthead resize in mobile view

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

Offline

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

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,439
Website

Re: Masthead resize in mobile view

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

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

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: Masthead resize in mobile view

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 15,060
Website

Re: Masthead resize in mobile view

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Pangolin test site, Backlight 1.1.1 test site

Offline

Board footer

Powered by FluxBB