Shopify themes, liquid, logos, and UX
Is there a tag in liquid that will center and object, or center some text or center anything I've looked extensively and haven't found any answers.
Finally found it "<center> (object) </center>" works on some stuff. Some thing this simple should not have been this difficult to find
where do you embed it within the code you want to center?
This solution worked for me!!!! Thank you!!!
🤣 I know right I was looking for ages! Thanks!
Hi @Michael40 ,
Centering an element is not the job of the liquid but of CSS. Here is how you can do it.
Go to the liquid file where you've the element to be centered for example you have a paragraph tag (<P></P>) inside a div tag (<div></div>) and you want to center it.
Just add the following class to the paragraph tag <p class-"cm_center"></p>
Now go to theme.scss.liquid and add the following code
.cm_center {
text-align: center; //If it's a text element
//If it's not a text element like paragraph then
width: 50px; //You can change the width
margin: auto;
}
Let me know if you need any help.
Cheers :))
Hi, Michael.
I'm trying to get my datepicker to center in my screen and have it mandatory before a customer can check out. Can you help me with this? I see solutions but nothing seems to work, but I might be putting the code in the wrong place. It works great, just off to the left instead of centered.
Can anyone help me center this?
<div class="index-sections">
{{ content_for_index }}
<div id="Jordan Anderson Racing" style=" padding:0px 100px 50px 100px; text-align: center; display: inline-block;">
<p>Bommarito Automotive Group is proud to sponsor Jordan Anderson, Parker Retzlaff and Jeb Burton.</p>
<p>Jordan Anderson Racing Bommarito Autosport is fielding two full-time cars in the NASCAR Xfinity Series (NXS) during the 2023 season. </p>
<p>Rookie Parker Retzlaff will sit behind the wheel of the team's NO. 31 FunkAway Chevrolet Camaro SS. </p>
<p>While the newly added No. 27 Alsco Chevrolet Camaro SS will be piloted by Jeb Burton. </p>
<p>After the completion of the first event of the 2023 season, the No. 31 begins the year 7th in the NXS Owner Point Standings </p>
<p>after Retzlaff’s 4th place finish on Saturday afternoon and the No. 27 starts the year 9th in the NXS Owner Point Standings after Burton’s 11th place finish. </p>
<p>For more information on JAR Bommarito Autosport visit bommarito.com. Follow the team on JAR Bommarito Autosport social channels; Facebook, Instagram, and Twitter.</p>
<p><button class="janderson" style="background-color:black; color:white !important;"><a href="https://www.lionelracing.com/search?keywords=jordan%20anderson" style="color:white !important;"><b>Check out Jordan Anderson Racing Xfinity diecasts here</b></a></button></p>
<img src="https://cdn.shopify.com/s/files/1/0068/3569/9773/files/Jar-Racing_Small_a6450c77-47a1-4301-8e8a-02b4...">
</div>
</div>
Can anyone help me center this? I've tried everything.
<div class="index-sections">
{{ content_for_index }}
<div id="Jordan Anderson Racing" style=" padding:0px 100px 50px 100px; text-align: center; display: inline-block;">
<p>Bommarito Automotive Group is proud to sponsor Jordan Anderson, Parker Retzlaff and Jeb Burton.</p>
<p>Jordan Anderson Racing Bommarito Autosport is fielding two full-time cars in the NASCAR Xfinity Series (NXS) during the 2023 season. </p>
<p>Rookie Parker Retzlaff will sit behind the wheel of the team's NO. 31 FunkAway Chevrolet Camaro SS. </p>
<p>While the newly added No. 27 Alsco Chevrolet Camaro SS will be piloted by Jeb Burton. </p>
<p>After the completion of the first event of the 2023 season, the No. 31 begins the year 7th in the NXS Owner Point Standings </p>
<p>after Retzlaff’s 4th place finish on Saturday afternoon and the No. 27 starts the year 9th in the NXS Owner Point Standings after Burton’s 11th place finish. </p>
<p>For more information on JAR Bommarito Autosport visit bommarito.com. Follow the team on JAR Bommarito Autosport social channels; Facebook, Instagram, and Twitter.</p>
<p><button class="janderson" style="background-color:black; color:white !important;"><a href="https://www.lionelracing.com/search?keywords=jordan%20anderson" style="color:white !important;"><b>Check out Jordan Anderson Racing Xfinity diecasts here</b></a></button></p>
<img src="https://cdn.shopify.com/s/files/1/0068/3569/9773/files/Jar-Racing_Small_a6450c77-47a1-4301-8e8a-02b4...">
</div>
</div>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024