New Advanced Design Not Mobile Responsive

Hi,
I have just started to set up a new site using the new advanced design (love it) but on the home page my hero/billboard photos aren't resizing properly for mobile.
Also is there a way to be able to add portrait photos to the billboard and have the photos show in full without crop?

Here is the link, the page isn't live yet though. Not sure if that matters.
http://www.michaelmannphotography.com/index.php?view=template&peid=831bc4bb3ca533458149f2dca364fa18
Thanks,
Michael

Edited Thu Oct 11, 18 5:56 AM by Michael Mann

Sorry Tim, just saw your post regarding the hurricane.
Stay Safe.

Edited by

Like most elements in the page designer, they are responsive and adjust to the screen resolution and the photos fill the display container. So at any resolution, there may be cropping, especially on mobile.

To adjust the height of billboards on mobile devices so not as much cropping occurs, in your Sytist admin go to Design -> Edit My Theme.

Click Additional CSS in the left menu and add this code:

@media (max-width: 800px) {
.ssto div, .fixedbg {
height: 260px !important;
}
}

You can adjust that 260px height value to make it taller or shorter.

Edited by

Hi Tim,

Thanks for getting back to me.
I hope everything is ok where you are.

I added the code and It looks like its worked thank you. One last question one my mobile when I look at the site, the background doesn't go all the way to the edge so there is text that crosses the border. Any ideas what I've done wrong?
Ive attached a screenshot.
No rush though.
Thanks,
Michael

Edited by

It's hard to tell without seeing the actual page, but try to reduce the font size of that Destination Wedding Photography and see if that makes a difference. If not, I need the link to the page.

Edited by

Hi Tim,
It is only happening on mobile devices. It just looks like the page isn't centred on mobile devices.
Here is the link http://www.michaelmannphotography.com/index.php?view=template&peid=831bc4bb3ca533458149f2dca364fa18&action=edit
and
http://www.michaelmannphotography.com/portfolio-115/

Its not a major issue more an OCD type thing for me.

Thanks,
Michael

Edited by

They actually both look fine on my phone.

But the text "Destination Wedding Photography" ... Destination and Wedding aren't breaking lines because in the code it has & nbsp; instead of just a space between them. Edit that text and remove the space between them then type it back in with the space bar and see if that helps.

Edited Mon Oct 15, 18 8:56 AM by Tim - PicturesPro.com

Awesome, that's fixed it.
Thanks for the help.
Hope everything is ok for you over there.

Edited by

Hi Tim,
Sorry I am having another issue now.
The text I insert over the hero/billboard, the one where the screen scrolls but not the photo. On mobile the text isn't resizing to fit properly on the page so it passes the bottom of the photo.
Here is a link to the pages for what I mean.
http://www.michaelmannphotography.com/information/prices/
http://www.michaelmannphotography.com/information/testimonials/
Any help would be appreciated.
Thanks,
Michael

Edited Tue Oct 16, 18 7:48 PM by Michael Mann

That is an awful lot of text to place over a billboard. Really should just be a little text there. You should try doing that another way. Plus the code I gave you above to make the billboards smaller is causing that.

Edited by

Hhmmm ok, I see your point. It looks great on a desktop but the font won't resize to match the image.
Is there another way to overlay text over an image and have it resize on different screens?
Thanks

Edited by

The text does resize with the screen resolution. It does a best guess, but it's not perfect. You would be better off having little text over the photo and then the main text on the page itself.

Edited by

Related to this topic; is there a way to lock the top photo into a specific ratio (square)? That option exists elsewhere ("Standard Photo > 1 image row that fills the entire column" has it, for example) but isn't available in the hero/slide show I'm using.

Right now the slide show width scales really well, but the photo height changes so you see anything from a vertical to a horizontal image depending on the screen width.

Edited by

It is not possible to lock the hero/billboards to a certain ratio. You would have to use a standard slideshow.

Edited by