Add a space in Between

[NateX]

Hi Shopify Experts,

I'd like to ask how can I put some space below with this format? 

<div class="wrapper graphic">

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>#Slow Fashion, On Demand.</strong></h1>

<h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">We make all of our clothes on demand—that means less trash.</h1>

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>No Waste—no Problem.</strong></h1>

            <h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">You order it, then we make it.</h1>

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>Zero Product Inventory.</strong></h1>

            <h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">No inventory and no landfill.</h1>

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>Smaller Carbon Footprint.</strong></h1>

            <h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">No middle men means we’re an end-to-end fashion destination. We oversee design, manufacturing, sales and customer service.</h1>

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>Cutting Edge Technology.</strong></h1>

            <h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">We use the latest technology to bring you eco-friendly water-less dyes and no waste fabrics.</h1>

            <h1 style="font-size:25px; font-family:tahoma; color:#424B5A; opacity: 1; letter-spacing: 6.4px; padding-left:30px;"><strong>Collaboration & Influence.</strong></h1>

            <h1 style="font-size:20px; font-family:PlayfairDisplay-Regular; color: #424B5A; opacity: 1; letter-spacing: 1px; margin-top:-50px; padding-left:30px;">We work with strong influencers to change the buying habits of the masses.</h1>

          </div>

This is where the space should go...

[dmwwebartisan]

@NateX 

add line hight in your <h1> tag lik this 

<h1 style="line-height:20px;"> heading here </h1>

Thanks!

[NateX]

Thanks. It does work on desktop, can you also help me to align the trees on mobile version?

[Kinjalbuha · Accepted solution]

hello @NateX 

add span tag and add margin-top in  your <h1> tag like this 

<h1 style="line-height:20px;"><span style="margin-top:10px";> heading here </span></h1>

[NateX]

Thanks, that did work, what about for these trees on mobile? Seems they are not centered  - 3 trees

<div class="one-six small--one-whole center" style="opacity: 1; margin-bottom: 50px; display: inline-block;">

            <img style="padding-left:0px; width: 80px;" src="{{ 'tree-small.svg' | asset_url }}" />

            <img style="padding-left:50px; width: 130px;"src="{{ 'tree-small.svg' | asset_url }}" />

            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />

            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />

            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />

            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />

          </div>

[Kinjalbuha · Accepted solution]

hello @NateX 

update your code to the below code 

     <div class="one-six small--one-whole center" style="opacity: 1; margin-bottom: 50px; display: inline-block;">
            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />
            <img style="padding-left:50px; width: 130px;"src="{{ 'tree-small.svg' | asset_url }}" />
            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />
            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />
            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />
            <img style="padding-left:50px; width: 130px;" src="{{ 'tree-small.svg' | asset_url }}" />
    </div>

[NateX]

Perfect! Yeah, that did work. Thanks a lot!!!