Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

Dawn 2.0 Blog featured image and title centering

BPCo
Tourist
14 0 0

Hi,

 

the Dawn 2.0 Featured Image is huge! I followed this instruction and got it resized  horizontal, but the picture is still too big vertically. How I can make it smaller please?

 

Also, I would liked to center the title?

 

Blog is not published yet, so I can't share link to it.

 

If you have codes/instructions to use, I would be more than happy to receive those, thank you in advance!

 

.  big in https://community.shopify.com/c/shopify-design/dawn-theme-blog-post-featured-image-too-big-and-overl...

 

**Unsolicited mentioned removed by Community Moderator**

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 728

This is an accepted solution.

Hi @BPCo,

Please go to section-blog-post.css file and remove code here:

Screenshot.png

then, paste this at the bottom of the file:

 

 

.article-template .media {
  padding-bottom: 35% !important;
}
.article-template .media img {
  right: 0;
}

 

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 15 (15)

LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

BPCo
Tourist
14 0 0

Shop is www.bopeachco.com  pls send email to bopeachco@gmail.com for password

LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Sorry, can you send me the published blog link via private message, it will keep you secure and i can check it for you.

Because I can't check if I don't see it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
BPCo
Tourist
14 0 0

https://bopeachco.com/blogs/proseccoa-persikoita/tervetuloa-kyltti

 

After publishing I can see that the mobile view for this blog post is looking rediculous and all my settings for alignment are gone.  🤯

LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Yes, it will work when you view at the front-end, when you view at the admin back-end, it won't pick up the code I showed so you won't be able to see it working.

Hope it is clear to you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
BPCo
Tourist
14 0 0

Not sure what you meant,but do you have solution how to fix picture and title as per my first message?

LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Please go to section-blog-post.css file and change code here:

Screenshot_24.png

then, paste this at the bottom of the file::

.article-template header {
      text-align: center !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
BPCo
Tourist
14 0 0
Thanks, it worked!!

Could you still help how to make featured image smaller in landscape
direction?


There's now this code below, but it only made it smaller horizontal

.article-template{ margin-top: 85px !important; } .article-template .media{
background: transparent !important; padding-bottom: 0 !important; }
.article-template
.media img{ max-width: 65% !important; position: relative !important; margin
: auto !important; } @media screen and (max-width: 749px) { .article-template
.media img{ max-width: 100% !important; position: relative !important; } }
BPCo
Tourist
14 0 0

The width is now ok, but I need to make photo lower, more rectangle shaped..

LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Did you change according to my previous instructions?

Screenshot_24.png

it will display fine like this:

Screenshot.png

Or do you want this?

Screenshot.png

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
BPCo
Tourist
14 0 0

Yes! The second choice please 🥰

BPCo
Tourist
14 0 0

Could you please advice how you did the second image? 🙂

LitCommerce
Astronaut
2860 684 728

This is an accepted solution.

Hi @BPCo,

Please go to section-blog-post.css file and remove code here:

Screenshot.png

then, paste this at the bottom of the file:

 

 

.article-template .media {
  padding-bottom: 35% !important;
}
.article-template .media img {
  right: 0;
}

 

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
BPCo
Tourist
14 0 0
Works like a charm, thank you very much 🤩❣️

Is there possibility to mobile optimaze blog posts? I mean chapters etc as
all looks on computer nice, but in mobile the lines and chapters along with
images are a mess...
LitCommerce
Astronaut
2860 684 728

Hi @BPCo,

Go to Assets > section-blog-post.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  .article-template__content .rte img {
    width: 100%;
    margin: 0 !important;
  }
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!