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

How to Make Codes Mobile Responsive


meganntab

Question

3 answers to this question

Recommended Posts

  • 0

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
  • 0
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
  • 0

@meganntab Do you still need help on this?

Also, I see this problem.

Site URL – https://www.nationaltab.com/

1. (Tablet-Homepage) Increase line spacing?

nationaltab.com-01-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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