Changing paragraph & header margins for mobile

Solved
Kjankko-US
Shopify Partner
202 4 25

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>

 

 

Accepted Solution (1)

Accepted Solutions
JHKCreate
Shopify Partner
3451 618 875

This is an accepted solution.

Hi @Kjankko-US 

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

Learn more about us: jhkcreate.com

View solution in original post

Replies 5 (5)
JHKCreate
Shopify Partner
3451 618 875

Hi @Kjankko-US 

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

Learn more about us: jhkcreate.com
Kjankko-US
Shopify Partner
202 4 25

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

 

JHKCreate
Shopify Partner
3451 618 875

This is an accepted solution.

Hi @Kjankko-US 

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

Learn more about us: jhkcreate.com
Kjankko-US
Shopify Partner
202 4 25

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 {
 
JHKCreate
Shopify Partner
3451 618 875

Yes indeed, that should do it @Kjankko-US !

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

Learn more about us: jhkcreate.com