Jump to content

How to Make Codes Mobile Responsive

Recommended Posts

  • Replies 3
  • Views 522
  • Created
  • Last Reply

Hello Megan,

This happens at a certain width, or size of the screen because the layout shifts into a single column and orders everything vertically. Partly because shrinking the entire website to fit to size just isn't a standard function although, there are clearly certain circumstances where this would be the desired effect. In this case, I would encourage you to consider a couple of things. The text displayed for the icons via the image changer will no longer be legible and you will need to adjust the dimensions of the image between the top icon and the bottom two icons. To do this, try using the following code.

The code:

#collection-60abe9a635cf7e0257669806 {
@media only screen and (max-width: 640px){
.sqs-row {
display: flex;
width: auto !important;
}
#block-yui_3_17_2_1_1623419223240_90583 {
width: 90vw !important; 
}
}
}

Hope this helps!

-Dan 

 

Link to comment
22 minutes ago, Wolfsilon said:

Hello Megan,

This happens at a certain width, or size of the screen because the layout shifts into a single column and orders everything vertically. Partly because shrinking the entire website to fit to size just isn't a standard function although, there are clearly certain circumstances where this would be the desired effect. In this case, I would encourage you to consider a couple of things. The text displayed for the icons via the image changer will no longer be legible and you will need to adjust the dimensions of the image between the top icon and the bottom two icons. To do this, try using the following code.

The code:


#collection-60abe9a635cf7e0257669806 {
@media only screen and (max-width: 640px){
.sqs-row {
display: flex;
width: auto !important;
}
#block-yui_3_17_2_1_1623419223240_90583 {
width: 90vw !important; 
}
}
}

Hope this helps!

-Dan 

 

Thanks, Dan - I see what you mean about the sizing shrinking. 

Is it possible to create a version that is only seen on mobile? I want to keep the layout as is on the desktop version of the site, but is it possible to create a code that lays this out differently on mobile? At this point, I would just stack the people icons on top of one another and have the triangle image above it all. 

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.