Re: Add a line for spacing between two class

Solved

Add a line for spacing between two class

Danielpochapski
Explorer
62 0 11

Hello Guys, 

 

Hello everyone, I would like to put these two elements (custom-address and shipping-estimated ) on different lines. How do I do it?

 

my website is: smartcasashop.com.br

 

chrome-capture-2023-5-6.png

 

Click to expand...
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function convertDate(e){var t,o=new Date(e);return[(t=o.getDate(),t<10?"0"+t:t)].join("/")}function getMesExtenso(e){var t=new Array(12);return t[0]="janeiro",t[1]="fevereiro",t[2]="março",t[3]="abril",t[4]="maio",t[5]="junho",t[6]="julho",t[7]="agosto",t[8]="setembro",t[9]="outubro",t[10]="novembro",t[11]="dezembro",t[e]}jQuery(document).ready(function(e){var t=new Date,o=t.setDate(t.getDate()+5),n=t.setDate(t.getDate()+2),r=getMesExtenso(t.getMonth());if(convertDate(o)>convertDate(n))var a="<strong>"+convertDate(n)+"</strong> e <strong>"+convertDate(o)+" de "+r+"</strong>";else{if(null==(s=getMesExtenso(t.getMonth()+1)))var s=getMesExtenso(t.getMonth()-11);a="<strong>"+convertDate(n)+" de "+r+"</strong> e <strong>"+convertDate(o)+" de "+s+"</strong>"}e.getJSON("https://wtfismyip.com/json",function(t){var o=(t=t.YourFuckingLocation).replace(", Brazil","");e(".custom-address").html("<font color='#226a7c'><b>Frete Grátis</b></font> para <strong><font color='#226a7c'>"+o+" e Região</font></strong>"),e(".shipping-estimated").html("Entrega estimada entre "+a+"."),e(".shipping-preview-loading").hide()})});
</script>
<div class="shipping-preview-line">
<img style="margin: -10px 5px -10px -8px" src="https://cdn.shopify.com/s/files/1/0683/1361/2602/files/correios.svg?v=1686022806" loading="lazy">
<p class="shipping-preview-loading" display:block;">Carregando, aguarde...</p>
<p class="custom-address"></p>

<p class="shipping-estimated"></p>
<style>
.shipping-preview-line {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.shipping-preview-line {
margin: 18px 1px 30px;
background: none;
border-radius: 50px;
border: 2px solid #00bd58;
padding: 10px 21px 11px 18px;
}
.shipping-preview-loading {
flex-grow: 1;
font-size: 13px;
line-height: 1.4;
margin-bottom: 0;
color: #00bd58;
}
.custom-address {
flex-grow: 1;
font-size: 13px;
line-height: 1.4;
margin-bottom: 0;
color: #00bd58;
}
.shipping-estimated {
flex-grow: 1;
font-size: 13px;
line-height: 1.4;
margin-bottom: 0;
color: #00bd58;
}
</style>
</div>
</div>

 

 

 

Accepted Solution (1)

Moeed
Shopify Partner
5796 1577 1874

This is an accepted solution.

Hey @Danielpochapski 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.shipping-preview-line {
    display: inline-table;
}
</style>

Capture.JPG

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 2 (2)

Ujjaval
Shopify Partner
1242 197 213

@Danielpochapski add below css into base.css file

.shipping-preview-line {
    display: block !important;
   
}

Moeed
Shopify Partner
5796 1577 1874

This is an accepted solution.

Hey @Danielpochapski 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.shipping-preview-line {
    display: inline-table;
}
</style>

Capture.JPG

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications