Jump to content

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

Recommended Posts

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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.