Icons Displaying Incorrectly in Mobile View

Store Design
1

Hi!

Please can someone assist me.

I have a custom html section on my homepage with icons. It used to display correctly in mobile view (landscape) but now it displays incorrectly. See screenshot below.

www.electricrideco.com

Below is the code that has been used.

Any assistance would be greatly appreciated!

Custom HTML Section:

[
![icon-fast-insured-shipping-2.png?v=1648802303|361x136](upload://oOOoUKCBwd7eVSttQclkUd3Sx1L.png)
](https://electricrideco.com/pages/shipping)

[
![icon-price-match-guarantee-3.png?v=1648803671|360x135](upload://zX53RJi8gc8Gf3I6tFMTWWWVsli.png)
](https://electricrideco.com/pages/price-guarantee)

[
![icon-expert-support-2.png?v=1648802952|361x136](upload://kMHIA5rERyk5PQacw8MCFTSOqb9.png)
](https://electricrideco.com/pages/contact)

[
![icon-financing-options-2.png?v=1648802952|361x136](upload://8AaXtPwdM1o1fhBwB7y0MpG7uLW.png)
](https://electricrideco.com/pages/financing)


CSS:
@media only screen and (min-width: 350px){
.medium-up--one-quarter {width:50% !important;}
}

@media only screen and (min-width: 750px){
.medium-up--one-quarter {width:25% !important;}
}

IMG_9855.PNG
IMG_9855.PNG2436×1125 192 KB

2

@guyv

add this code to your theme.scss file.

Navigate to online store >> Click edit theme code.

Now find theme.scss and paste the following code on the bottom:

@media only screen and (max-width: 768px){
.section-block--padding .grid__item-inner .rte{

		   display: grid !important;
  
           grid-template-columns: 1fr 1fr;}
}

@media only screen and (min-width: 350px){
.medium-up--one-quarter {
        width: unset !important;}
}
3

@eFoli-Marvic

Thanks a lot for your reply.

Let me just clarify:

Desktop view should look like this and not change:

Screen Shot 2022-04-07 at 9.19.35 AM.png
Screen Shot 2022-04-07 at 9.19.35 AM.png1280×683 447 KB

After inserting your code it looks like this:

Screen Shot 2022-04-07 at 9.32.35 AM.png
Screen Shot 2022-04-07 at 9.32.35 AM.png1280×681 116 KB

It’s only the mobile view that needs to be changed.

Thanks!

4

@guyv Please apply the code and check. I have given you the code that is for only mobile. It will not change the desktop view.

5

@guyv If the above code is not working properly then apply this code :

@media only screen and (max-width: 768px){
.section-block--padding .grid__item-inner .rte{

		   display: grid !important;
  
           grid-template-columns: 1fr 1fr;}

.medium-up--one-quarter {
    width: unset !important;
}
}
6

@eFoli-Marvic

Above code works perfectly! Thank you so much!!