Change margins on just one page: venture theme

Hello, I have a small problem with the venture topic, I don’t know if it can be solved, so I’m contacting you here, I haven’t found a similar question.
So, I want to change the margins on only two or three pages of the site, I tried to change the following:

  • I managed to change the code in theme.scss but change the margins of the whole site, I don’t need that.
    -I read somewhere that I could call that page with # page-title .class and then write the code, but I can’t do that, nothing happens.
    if anyone has a solution, I would be very grateful.

the page I want to change is :

https://yocave-shop.myshopify.com/pages/proizvodi

and

https://yocave-shop.myshopify.com/pages/proizvodi/ (each subsequent product)

password: yocave.shop

@yocave - your pages do not have any unique id, therefore if you add margin code then it will change whole site. Will need to edit code to have unique ids.

@yocave - please go to your theme.liquid file and add class=“{{ page.handle }}” to your body tag, this will add unique ids to your pages and you can use them to add any css you like

@suyash1 Okay, I put in the body tag exactly what you wrote, how do I refer to the css exactly on that page /proizvodi ?

And do I need to insert another ID or CLASS in the theme.liquid so that I can refer to it?

@suyash1

I managed to solve it.
I added class = “{{page.handle}}” to the body tag, then I had to add the following to theme.liquid:

Show More

{% if page.handle == “proizvodi” %} ← your page

[details=Show More]

Show More

.main-content {

Show More

max-width: 80%;

Show More

margin: 30px auto;

Show More

}

Show More

.grid__item {

Show More

margin-top: 25px;

Show More

}

Show More

.grid__item p {

Show More

text-transform: uppercase;

Show More

}

Show More
Show More

{% endif%}

So I managed to decide to change the style only on one side of the site.
Well, if it is useful to someone else :slightly_smiling_face:

@yocave - just one thing, sorry I think it will be better to use id instead of class in theme.liquid file, then you can right click on the page, inspect and select the id/class of the page in body tag, foe example, for proizvodi page you can write , this code will change width of the page to 50%, this is just an example you can check it and remove this code, will need to change class as per the page.

.proizvodi .main-content{max-width:50%;}

@yocave - yes that too can work, but it will need code for each page which might be difficult for new person, you can use css too.

@suyash1

Yes, I checked this second method, it works too.

Basically it all depends on the theme, if in the theme almost every DIV is done with class, it is better to use a class for page.handle, if it is done with ID then with ID .
And for this second answer, it may be harder but they can do copy / paste and just change the page name.

@yocave - yes you can adjust as per page name and use class/id as per theme. Do let me know if you need anything else, you have me email below.

1 Like