[Resolved] Showing picture as properly resized on main page on mobile, page header video

[Halil]

I have setup a page header with video and also defined an image for mobile devices to show.

Video plays full screen as intended.

On mobile devices picture is shown, but the picture does not proportionally sized, just a small piece of picture is shown on page.

How can I make the picture fit in size for mobile devices, so that the whole picture will be seen.

I tried many options but I am lost now. Could u pls help?

[Halil]

and also I was not able to remove “Menu” on top for mobile devices. Just the picture should be shown without menu and it should be shown in full.

[Halil]

I somehow managed to show it by following code writen by one of you for similar posts.

I’d like to make picture a bit taller but again the whole picture should be shown.

I tried “top-bottom padding” on Page Header–>Content part, it makes it taller but loosing the proportions.

How can I do this?

[Halil]

My code copied from several posts.

@media (max-width: 768px) {
    .generate-combined-page-header {
        height: auto !important;
			  width: auto;
		
    }
}

.menu-toggle:before,
.menu-toggle .mobile-menu {
    display: none;
}

[Tom]

If you want the whole picture to show, it needs to stay within the original aspect ratio. If you were to force it to be taller, the image would stretch and lose quality.

[Halil]

so, what is your advise Tom? My concern is image should not look so small and should be proportional as much as possible.

I am a good blog writer but rookie in wordpress, css etc!

[Tom]

I suppose you would need to upload a taller image – that way the aspect ratio could stay at what it should be, but the image would be taller.

Otherwise you have two options:

a) Increase the image height, which will cut off some of the image on the right.
b) Increase the image height and keep the width, which will stretch the image and lose the aspect ratio.

[Halil]

thank you for recommendations.

[Tom]

No worries 🙂

[Author]

Posts