New Shopify Certification now available: Liquid Storefronts for Theme Developers

Relocate Account Icon on Mobile View to Be On Top of the Cart Icon in Vertical Alignment

DavidLeong
Tourist
26 0 2

Need help to set and relocate Account Icon on mobile view to be on top of the Cart Icon in vertical alignment, as shown in attached image file. Wondering whether this is possible?

 

Anyone can help?

 

My website is www.mobilecablestore.com

 

Greatly appreciated. Thank you!

 

1700276202095.JPEG

Replies 9 (9)
Guleria
Shopify Partner
2787 555 795

Hello @DavidLeong ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below:

@media screen and (max-width: 768px) {
.header__icons { 
    flex-direction: column; 
}
.header__icon--cart{
margin: 0;
padding: 0;
}
}

 

Thanks

-

Need a Shopify developer? Email: guleriathakur43@gmail.com

,
- Skype: navrocks1
- Try GEMPAGES a great page builder
-Advance Search Filter
DavidLeong
Tourist
26 0 2

I have edited the margin to 2 instead, to make it slightly right as below: 

 

@media screen and (max-width: 768px) { .header__icons { flex-direction: column; } .header__icon--cart{ margin: 0; padding: 0; } }

 

Possible to help me put an additional code to make the Account icon slightly right as well to align with the Cart icon. Thank you!

 

Screenshot 2023-11-18 at 12.20.50 PM.png

DavidLeong
Tourist
26 0 2

Sorry i mean i edited it to this

 

@media screen and (max-width: 768px) {
.header__icons {
flex-direction: column;
}
.header__icon--cart{
margin: 2;
padding: 0;
}
}

Guleria
Shopify Partner
2787 555 795
@media screen and (max-width: 768px) {
.header__icons {
flex-direction: column;
}
.header__icon--cart{
margin: 2px;
padding: 0;
}
}
-

Need a Shopify developer? Email: guleriathakur43@gmail.com

,
- Skype: navrocks1
- Try GEMPAGES a great page builder
-Advance Search Filter
DavidLeong
Tourist
26 0 2

@media screen and (max-width: 768px) {
.header__icons {
flex-direction: column;
}
.header__icon--cart{
margin: 2;
padding: 0;
}
}

 

I applied the above, but the Account icon for mobile view is still not in-line with the Cart Icon

DavidLeong
Tourist
26 0 2

Screenshot 2023-11-18 at 12.20.50 PM.png

Guleria
Shopify Partner
2787 555 795

Seems you are not checking the solution properly.
Its 

margin: 2px;
not 
margin: 2;

-

Need a Shopify developer? Email: guleriathakur43@gmail.com

,
- Skype: navrocks1
- Try GEMPAGES a great page builder
-Advance Search Filter
DavidLeong
Tourist
26 0 2

My apology for the confusion. How can i make both icon to align to the red line on the right as per screenshot?

 

Screenshot 2023-11-18 at 1.12.19 PM.png

DavidLeong
Tourist
26 0 2

Screenshot 2023-11-18 at 1.40.52 PM.png