Shopify Blog automatically centers text - Studio Theme

SweetViolet
Explorer
49 0 20

I've posted about this problem before but haven't had any luck, so seeing if anyone out there may be able to help.

 

The left/right/center setting for text and image just does not work on my blog. I will write a paragraph centered on the left, insert an image to be centered in the middle, and when I select the center justified box, it centers everything on the page. I've tried making sure that I insert things on the left, select it carefully, not selecting any other text, click center justify and it still automatically center justifies the whole paragraph above and below the image.

 

There must be some way to enter code so that it understands that when a left justified paragraph has ended, and there is a break, that what follows after can be center justified without affecting the preceding or following paragraphs. I just don't understand why this doesn't work, like it does in any word processing program.

 

To complicate matters, I am now trying to embed an images in the blog post using the <>, meaning I am using code provided by another site so that I can use their images with permission. These images will not center no matter what I do. Maybe if I can figure out how to enter code to tell it to just center justify certain elements, I can figure out how to center justify these images as well.

 

My blog is very important to my business and I really need to get this sorted out so I can format my blog posts correctly. Any help is much appreciated! Thank you!

 

Here is the <> code from an example of text, header, image, text, where only the image should be center justified:

 

<p>The Neoclassical design style of grand country houses has recently become my favorite styles, for its soft color palette and ability to create a serene and&nbsp;calming atmosphere. &nbsp;</p>
<h2 data-mce-fragment="1">What is the Neoclassical design style?<em style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px;"></em></h2>
<div class="getty embed image" style="background-color: #fff; display: inline-block; font-family: Roboto,sans-serif; color: #a7a7a7; font-size: 11px; width: 100%; max-width: 594px;">
<div style="padding: 0; margin: 0; text-align: left;"><a href="http://www.gettyimages.com/detail/881644476" style="color: #a7a7a7; text-decoration: none; font-weight: normal !important; border: none; display: inline-block;" target="_blank">Embed from Getty Images</a></div>
<div style="overflow: hidden; position: relative; height: 0; padding: 66.66667% 0 0 0; width: 100%;"><iframe src="//embed.gettyimages.com/embed/881644476?et=nLTV0m2oQuNLK-8SlXWHCg&amp;tld=com&amp;sig=hTPsQw1ovCtF8JKDmwt5nUEPXMHQ3l_AEBAcEgzJXPw=&amp;caption=true&amp;ver=1" width="594" height="396" style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;" scrolling="no" frameborder="0"></iframe></div>
</div>
<p><em>Tyringham&nbsp;Hall, built by&nbsp;Sir John Soane in 1792</em></p>

 

 

Replies 2 (2)

deepaksharma
Shopify Partner
448 62 92

try giving a class to your images and texts and apply !important to them, it might fix the problem you are facing.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com

Shay
Shopify Staff
2830 442 577

Hey there @SweetViolet 

 

I think I found the right way to format those images so that they show up as center justified. I tested this on my own store and it appears to have solved it for me. Here is the sample code based on what you provided, but with the additional information for justifying the image. 

 

<div style="overflow: hidden; position: relative; height: 0px; padding: 66.6667% 0px 0px; width: 100%; display: flex; justify-content: center;"><iframe style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;" height="396" width="594" src="//embed.gettyimages.com/embed/881644476?et=nLTV0m2oQuNLK-8SlXWHCg&amp;tld=com&amp;sig=hTPsQw1ovCtF8JKDmwt5nUEPXMHQ3l_AEBAcEgzJXPw=&amp;caption=true&amp;ver=1" teidentifier="60gwis6sgxtltacbh05" frameborder="0" scrolling="no"></iframe></div>

 

The specific change was the addition of "display: flex; justify-content: center" after "width: 100%". When troubleshooting simple HTML or CSS changes you can use free tools like ChatGPT to assist you, I highly recommend it! Let me know if this resolves the issue with your images for you. 

 

Also, if you are doing your HTML inside the blog editor directly, I actually recommend using an online tool like Free online HTML editor - onlinehtmleditor.dev and then copy and paste the HTML into your blog. You have more space to work and a more robust interface for HTML content. 

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog