Problem displaying two Text Objects on Same Line

Store Design
1

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
JohnGWMS_0-1614527689595.png1090×423 10.3 KB

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;
}

"Hello"
"John"

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?

2

Hello There,
Please use this one code

"Hello"
"John"

.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
}

1 Like
3

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!)

4

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.