Dawn 2.0 Blog featured image and title centering

Retired Boards Appdev Store Design
1

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-overlapping-the/m-p/1438714

Unsolicited mentioned removed by Community Moderator

2

Hi @BPCo ,

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

3

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

4

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.

5

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. ?

6

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.

7

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

8

Hi @BPCo ,

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

Screenshot_24.png
Screenshot_24.png831×383 12.3 KB

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

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

Hope it helps!

9

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; } }

10

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

11

Hi @BPCo ,

Did you change according to my previous instructions?

Screenshot_24.png
Screenshot_24.png831×383 12.3 KB

it will display fine like this:

Screenshot.png
Screenshot.png1132×810 190 KB

Or do you want this?

Screenshot.png
Screenshot.png1450×659 84.9 KB

12

Yes! The second choice please ?

13

Could you please advice how you did the second image? :slightly_smiling_face:

14

Hi @BPCo ,

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

Screenshot.png
Screenshot.png865×587 30.1 KB

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!

15

Works like a charm, thank you very much ? :heart_exclamation:

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…

16

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.