Distorted masthead images

patvandenbosche

I was checking my site on my iphone and discovered the image in the masthead on secondary pages is distorted and you only see a portion of the image in masthead on the homepage. I'm sure it's in the settings in the template, but haven't been able to figure it out. Please tell me what I need to do for both situations. I'm attaching a screenshot from my iphone in case that might help.

Thanks,
Pat

saguaros

Hi patvandenbosche

I can't access your site now, could you check again?

patvandenbosche

It is working now, and I just tried using the login I sent you, and it works. The hosting and domain manager are having trouble, and I wasn't aware they were still working on it.

Please try again. Thanks.

saguaros

Hi patvandenbosche

This is a known issue with the responsive layout, in the small the screen, if we show the image with the same height as desktop view, it will crop the image to show a part of image only.

In case that you want to show the image completely, you can use some custom style but it will be resized:

@media (max-width: 480px) {
.acm-slideshow .item {
    background-size: contain;
    background-repeat: no-repeat;
}

.acm-slideshow .slider-content {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.acm-slideshow .item-title {
    font-weight: 100;
    font-size: 20px;
}
}

it will look like this:

You can consider to show less text / button / decrease font size / etc ... in small screen so it can display better.

patvandenbosche

Can I set up a different masthead module that only displays this way on certain size screens? And then if I choose to use the smaller screen I can restrict the amount of text on the overlay. Will the above code just affect the smaller screen? If not, how would it be done?

patvandenbosche

Also, if this is a known issue, is this going to get fixed anytime soon?

saguaros

patvandenbosche I did not mean it's issue from us, it's general issue for responsive layout and images.

The idea of using 2 modules for desktop and mobile view is better, I think. You create a new section next to the current slideshow + assign a module (that you want to show on mobile) to and configure the responsive layout. In template layout settings, you can select a view port: desktop / tablet / mobile / ... and click the 'eye' icon to hide module in specific screen:

With being said, you will hide the current slideshow on mobile view to show on desktop only, vice versa for the module on mobile.

patvandenbosche

Also, I don't like the blue bar. There has to be a way to get less image, get rid of the blue bar and still show a better size image for a phone? Set it for the height, and then crop the sides evenly.

It just dawned on me! I will use two different mastheads, one for desktop and one for phones. Then only display each one on the right size screen. That should make it work better.