Dawn 2.0 Blog featured image and title centering

[BPCo]

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**

[LitCommerce]

Hi @BPCo,

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

[BPCo]

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

[LitCommerce]

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.

[BPCo]

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]

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.

[BPCo]

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

[LitCommerce]

Hi @BPCo,

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

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

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

Hope it helps!

[BPCo]

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]

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

[LitCommerce]

Hi @BPCo,

Did you change according to my previous instructions?

it will display fine like this:

Or do you want this?

[BPCo]

Yes! The second choice please 🥰

[BPCo]

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

[LitCommerce · Accepted solution]

Hi @BPCo,

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

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!

[BPCo]

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]

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.