How do I center this @BSS-TekLabs ?
Topic summary
Goal: Center a logo image and tagline text within a Shopify Custom Liquid section.
Initial attempt: A CSS fix was suggested by adding flexbox styles to the section class in the theme’s CSS (main.css/base.css). The OP reported it didn’t work. Their current setup used inline HTML/CSS in the Custom Liquid, positioning the image with margin-left percentages and centering the
text.
Solution provided: Another helper advised editing theme.liquid and inserting provided code just above the tag. Although the exact code isn’t visible in the thread, screenshots show the logo and text centered as intended.
Outcome: The OP confirmed the theme.liquid insertion worked perfectly. Issue resolved; no further actions requested.
Notes: Screenshots were central to demonstrating the before/after alignment. Key terms: Custom Liquid (a custom section using Shopify’s Liquid), theme.liquid (the main theme layout file).
1 Like
Hi @Jiwya
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.section-sections--18454062792939__custom_liquid_XKKqqN-padding {
display: flex;
flex-direction: column;
}
.section-sections--18454062792939__custom_liquid_XKKqqN-padding img {
margin: auto;
width: 150px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
This code does not seem to work.
Here’s the existing CSS for the custom liquid if that helps:
p {
color: #ffffff;
text-align: center;
}
.mid-image{
margin-left:46.5%;
height: 50px;
width: 160px;
}
@media only screen and (max-width: 767px){
.mid-image{
margin-left:30%;
}
}
Purely Plant-Based Luxury Fashion
@Jiwya ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
result
1 Like
This worked perfectly, thanks!
@Jiwya , glad to help you 