Scaling of image component on mobile view

[chunchet]

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.

[Harry]

Hi,

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

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[chunchet]

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?

 

[Harry]

Hi,

You want 3 banner below in a row on mobile?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[chunchet]

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

 

[Harry]

Hi Chunchet,

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

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[chunchet]

Hi Harry,

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

Thank you

[Harry]

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

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[chunchet]

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

[Harry]

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

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts