Home Forums Themes Support Gecko Scaling of image component on mobile view

This topic contains 9 replies, has 2 voices, and was last updated by  Harry 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #23520

    Hi there,

    How do i configure the image component that spans the entire width on my front page (http://www.mocy.my) to scale accordingly on mobile view, as it will leave a huge empty space on the top and bottom part of the image when viewing on mobile.

    Thank you in advance.

    #23528

    Hi,

    Please uncheck in “Full-height” option for first row wrap image.

    Kind regards

    #23533

    Hi Harry,

    it works and thank you. But how do I also resize the three banner images below it to scale accordingly when I view them on mobile?

     

    #23535

    Hi,

    You want 3 banner below in a row on mobile?

    #23536

    Hi Harry,

    I would like to arrange them in columns, as they are now. In mobile view, want to make them closer to the full width image above, and make those 3 banner images smaller, as you can see they are larger compared to the full width image, how can i make them so scale accordingly to the screen size?

    Thank you

     

    #23538

    Hi Chunchet,

    Please edit the column wrap banner and follow this screenshot http://take.ms/Z5skN

    Kind regards

    #23671

    Hi Harry,

    I changed accordingly but it does not look good, you can refer to my website for some examples.

    Thank you

    #23676

    Hi,

    It now you don’t do same width for column 2nd and column 3rd, please change column 2nd and column 3rd to 4 columns-1/3

    Best regards

    #23683

    Hi Harry,

    Ok i have done it, but they are now on the same row, can i make these 3 images under one column but the image size will be smaller?

    Thank you

    #23690

    Hi,

    Yes, please change to one column and add below code to JanStudio > Theme Option > General Layout > Custom CSS

    @media only screen and (max-width: 767px) {
    .jas-promotion {padding: 0 20px;}
    }

    and change 20 to your number.

    Kind regards

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.