Problem displaying two Text Objects on Same Line

JohnGWMS
Tourist
5 0 0

I need to display a Vendor logo and an SKU # on the same line at the top of the product details block.  The logo needs to be displayed at the left of the block and the SKU on the right.

I am inserting a Liquid/HTML element into a new Product Template using PageFly.

For testing, I am using two text strings: Hello and John.  They should be displayed on the same line.

JohnGWMS_0-1614527689595.png

Here is the HTML/CSS I am using:

.manufacturer-logo {
width: 50%;
height: 20px;
display: inline-block;
margin: -1px;
}
.sku-container {
width: 50%;
height: 20px;
text-align: right;
display: inline-block;
margin: -1px;
}

<div class= "manufacturer-logo">"Hello"</div>
<div class= "sku-container">"John"</div>

I tested the code in a sandbox and it worked OK.  However, I had to insert the -1px margin into each class to get the strings to appear on the same line.

The screenshot above was taken after publishing my page.  It seems that the misalignment results from the percentage width attributes.

What do you think I am doing wrong?

0 Likes
Pallavi
Shopify Expert
1109 146 178

Hello There,
Please use this one code

<div class="left-manufacturer-logo">"Hello"</div>
<div class="right-sku-container">"John"</div>

.left-manufacturer-logo {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline
}
.right-sku-container {
float: left;
text-align: left;
margin: 2px 10px;
display: inline
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
JohnGWMS
Tourist
5 0 0

Thank you Pallavi

The solution isn't quite right.  I should have been more specific about what is needed.

The logo should be left-justified.  This is simple to fix.

However, sku-container needs to be right-justified.  The right border of the container needs to align with the surrounding container.  This is why I used a percentage width.

I didn't think of using float to align the two containers (I am a novice!)

 

 

0 Likes