How can I change image layout on mobile version (without changing desktop version)?

Site URL: https://www.aestory.com

Hi,

Is there a way I could change the layout of my homepage image on mobile version? The image is in landscape mode on desktop but that doesn't apply to well on mobile. So basically how could I have the homepage image in portrait mode on mobile.

Thanks.

You can write media queries in your custom css area.

Basically create 2 alternate image versions 1.) large landscape oriented image that will only display on desktop, hidden from mobile view  and  2. a small and vertically oriented one that will display on mobile only and be hidden from desktop view.

Then when writing your css media queries, in order to hide them, target each image with its specific block id; using the "display" property with a value of  "none" for when you want to hide it.

Here is an example:

@mobile: ~"only screen and (max-width: 640px)";  

@desktop: ~"only screen and (min-width: 900px)";

@media @mobile {#block-yui_replacewithblockidofLargeimage {

display: none;}}

@media @desktop {#block-yui_replacewithblockidofSmallimage {

display: none;}}

Also, you may want/need to add an additional query for tablet sizing. Hope this helps!

On 2/20/2021 at 12:18 AM, Feblanc said:

Site URL: https://www.aestory.com

Hi,

Is there a way I could change the layout of my homepage image on mobile version? The image is in landscape mode on desktop but that doesn't apply to well on mobile. So basically how could I have the homepage image in portrait mode on mobile.

Thanks.

Do you still need help?

Yes, please! I'm not super comfortable using codes haha. 

Hi there I have exactly the same issue however I am not IT specialist and really would appreciate a real help, can anyone help please, Feblanc?

many thanks in advance

8 hours ago, Jasmine7 said:

Hi there I have exactly the same issue however I am not IT specialist and really would appreciate a real help, can anyone help please, Feblanc?

 

many thanks in advance

Do you use classic editor or new editor? What is your site url?