reducing blank space above and below custom content heading

Highlighted
Tourist
20 0 1

Im trying to reduce the spacing above my custom content section/heading when my shop is being viewed on mobile. 

attached is an image on normal laptop screen, and then iphone screen. Iv managed to work out how to make sure that the heading font size reduces appropriately when switching to mobile view(it was staying the same size and thus taking too much space on mobile), but I cant figure out how to do the same for the spacing between the writing and the lines. As you can see, the spacing between the heading and the lines are fine in laptop view, but then massive on mobile. 

can anyone help? this is the custom code i have made for this section:

<h1></h1>
<center>
<font-size="3">

<p></p>
<hr size="3" width="55%" align="centre" color="grey">


<h1 style="font-size:5vw;">Sustainable &amp; Eco-friendly statement jewellery, made with recycled plastic</h1>

<p style="font-size:3vw; ">handcrafted in Lausanne, Switzerland</p>

<p></p>

 

what code can i add to the above to make it work?

 

thanks,

 

Kelly 
<hr size="3" width="55%" align="centre" color="grey">

</font-size="3"></center>

0 Likes
Highlighted
Shopify Partner
107 9 20

Hi there, 

 

I don't see any screenshot but did notice a small spelling mistake on your code. 

 

<hr size="3" width="55%" align="centre" color="grey"> - should be center but I'm sure that's not the issue. Can you show me a screenshot? 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
Tourist
20 0 1

heres the attachments Screen Shot 2020-01-09 at 23.15.42.pngScreen Shot 2020-01-09 at 23.15.53.png

0 Likes
Highlighted
Tourist
20 0 1

just added the screen shots.

yeah the spelling on 'centre' is weird, in one part of the code it accepts it as center, but others it accepts it as centre? USA vs GB english?

0 Likes
Shopify Partner
107 9 20

That's definite not possible. I'm sure it's not breaking because you are probably defaulting to a different class containing the same rules but centre is not a valid rule. More about it: https://www.w3schools.com/tags/tag_center.asp 

 

Regarding your specific issue, could you share a link? I'll modify the code via dev tools and give you the answer.  It will most likely be padding related

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
Tourist
20 0 1
Thanks for the info! I don’t know a lot about code as you can tell-but I’m trying to learn :)

https://curajewellery.com/

Or do you need a link to my Shopify account?
Thanks so much!
0 Likes