How to Make Codes Mobile Responsive

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

Hi everyone, 

I inserted custom code blocks under the "Solution Driven Process" section on this page to add a "roll-over" image feature. The code works great on the desktop version, but on mobile, the 2 people icons get pushed on top of each other. 

Any idea how to fix this? 

Thanks!

Megan

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 

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. 

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