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

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

Home Forums Support Showing picture as properly resized on main page on mobile, page header video

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #548168
    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?

    GP Premium 1.6.2
    #548171
    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.

    #548207
    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?

    #548223
    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;
    }
    #548598
    Tom
    Lead Developer
    Lead Developer

    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.

    #548603
    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!

    #548942
    Tom
    Lead Developer
    Lead Developer

    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.

    #549017
    Halil

    thank you for recommendations.

    #549378
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.