Add a space in Between

Solved
NateX
Excursionist
16 1 3

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...
 
Screen Shot 2021-10-27 at 9.29.27 AM.png
Accepted Solutions (2)

Accepted Solutions
Natztech
Shopify Partner
2238 565 1373

This is an 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>

 

 

View solution in original post

Natztech
Shopify Partner
2238 565 1373

This is an 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>

 

View solution in original post

Replies 6 (6)
dmwwebartisan
Shopify Partner
9826 2238 3078

@NateX 

add line hight in your <h1> tag lik this 

 

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

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
NateX
Excursionist
16 1 3

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

249211268_475772610287174_5597849877694455159_n.jpg

Natztech
Shopify Partner
2238 565 1373

This is an 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>

 

 

View solution in original post

NateX
Excursionist
16 1 3

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>
 
249280173_349642363580933_6792400468321346028_n.jpg
Natztech
Shopify Partner
2238 565 1373

This is an 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>

 

View solution in original post

NateX
Excursionist
16 1 3

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