Changing paragraph & header margins for mobile

Solved
Kjankko
Pathfinder
101 2 11

Hi,

I need to create "Our story" page (to Shopify admin) and it needs some HTML/CSS skills. The Envy -themes page margins are way too wide for me.

When I change the margins on both sides (left & right) the mobile view change also - and it looks stupid.

Question: How can I change the page margins 

 

<h5>This is the header</h5>
<p>h5 header and this paragraph should be the following way: desktop should contain 100px margins for both sides.
Mobile should have it's original margins - otherwise the page looks stupid if it has 100px margins in mobile also.</p>

 

 

0 Likes
JHKCreate
Shopify Partner
2033 330 443

Hi @Kjankko 

Would you mind sharing the preview of this page? We can then provide a code that only adjusts margins on that page without modifying the remaining pages!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
Kjankko
Pathfinder
101 2 11

Hi,

You can check the page with the following password:

URL: tervaskanto.myshopify.com
password: whawst

The specific page which needs narrow margins is: https://tervaskanto.myshopify.com/pages/tehoaineet

 

0 Likes
JHKCreate
Shopify Partner
2033 330 443

This is an accepted solution.

Hi @Kjankko 

Add the following code to your HTML code on this page specifically: 

<style>
@media (min-width: 1200px)
{
article#tehoaineet {
    margin-left: 100px;
    margin-right: 100px;
}
}
</style>

 

Let me know !

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
Kjankko
Pathfinder
101 2 11

It works! Thank you @JHKCreate - you save my day!

If I want to create the same margins to other pages (/pages) - I assume that I can only copy this code and change the page name? Now it's "tehoaineet".

article#tehoaineet {
 
0 Likes
JHKCreate
Shopify Partner
2033 330 443

Yes indeed, that should do it @Kjankko !

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com