Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Feblanc

Question

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.

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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!

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...