Changing paragraph & header margins for mobile

[Kjankko-US]

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>

[JHKCreate]

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!

[Kjankko-US]

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 · 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 !

[Kjankko-US]

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]

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