How can I adjust margins and padding on main and product pages?

Technical Q&A
1

Hey guys, whats up?

I need some help, i wnat to change some margins paddins on my pages but dont know how.

I know the basics for coding and css but need help of you guys.

Im gonna leave some print here to show exactly what a want to do.

Product page:

Ajuste Shopfy 2.PNG
Ajuste Shopfy 2.PNG1600×765 178 KB

Main Page:

Ajuste Shopfy 1.PNG
Ajuste Shopfy 1.PNG1600×771 154 KB

Link for My Store is:

https://vivamaisfacil.com/

Sorry for bad english, im from Brazil

2

Hi @martinvargas1 !

No worries on your English, perfectly clear!

Please go to your theme.css file and add the following code:

div#shopify-section-1610922973e324cdcf {
    padding: 0px!important;
}

.product-single__description.rte {
    margin-top: 0px;
}

Let me know if that works!

3

Hahah im glad you understand me, it works perfectly, thanks.

If it isnt too much, can you help me with something else?

I would like to change the height off the elements marked in the imagem bellow:

Ajuste Shopfy 3.PNG
Ajuste Shopfy 3.PNG1600×772 159 KB

How can i do it?

Thank you so much

4

Add this code:

only screen and (min-width: 750px)
{
.collection-grid-item {
    padding-bottom: 50%;
}
}

Let me know!

5

It worked on Desktop, but o mobile stays the same way. It should be diferent, no?

Bellow a print from my cell:

WhatsApp Image 2021-01-19 at 14.06.51.jpeg
WhatsApp Image 2021-01-19 at 14.06.51.jpeg540×1260 71.5 KB

6

You can remove the @_media and just use this instead:

.collection-grid-item {
    padding-bottom: 50%;
}

That should do it!

7

Thank you so much. You solved all my issues!!

Would like to know as much as you from coding hahah

Can you tell me the best place to learn how to customize my store on shopfy without bothering you?? xD

8

Fantastic! Don’t forget to Mark As Solution & Like to make the answer more visible to the community. Cheers!

I recommend you start reading up on this:

https://www.w3schools.com/

Have fun!