Solved

Can I align text and add a cart icon on my Shopify page?

FindWorld
Pathfinder
145 6 73

hello community,

I would like to leave this part of my page, as it is in the second image, could you help me, please?
I can't fix the text and add the cart icon.
It is like this:

FindWorld_2-1625613312347.png

I would like it to look like this:

FindWorld_0-1625613245673.png


And I also need to get these items on the computer and I'm not getting it.

FindWorld_3-1625616248706.png

Thanks.

My store: findworld.com.br
Password: edit321

 

Accepted Solution (1)
ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width:749px){
.help1 .box-footer-large:first-child {
width: calc(50% - 20px);
margin-right: 20px;
}
.help1 .box-footer-large:first-child>div {
width: 100% !important;
margin-right: 0;
}

.help1 .box-footer-large:first-child>div .desc {
width: 100%;
word-break: break-all;
}
.help1 .box-footer-large:last-child {
width: 50% !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 4 (4)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width:749px){
.help1 .box-footer.large:first-child > div:nth-child(1) {
width: 80% !important;
}

.help1 .box-footer.large:last-child > div:nth-child(1) {
width: 50% !important;
}
}

.line-info .item .icon img {
width: 100%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Pathfinder
145 6 73

Hello friend, thanks for the help.

Can you tell me how to leave it like this?
I needed to remove the purple part of the first part, because this is cutting the form, I tried to change the code you sent me, but this purple doesn't come out at all.
again thanks for the help.

FindWorld_2-1625672442530.png

FindWorld_1-1625672432510.png

 

 

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width:749px){
.help1 .box-footer-large:first-child {
width: calc(50% - 20px);
margin-right: 20px;
}
.help1 .box-footer-large:first-child>div {
width: 100% !important;
margin-right: 0;
}

.help1 .box-footer-large:first-child>div .desc {
width: 100%;
word-break: break-all;
}
.help1 .box-footer-large:last-child {
width: 50% !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Pathfinder
145 6 73

Hello friend, thanks for the help.
Could you help me fix the icons? I need to remove this code, but I can't because it's in the index

.icon {
display: inline-block;
width: 20px; < remove
height: 20px; < remove
vertical-align: middle;
fill: currentColor;
}



FindWorld_0-1625719789491.png