Dawn 2.0 Blog featured image and title centering

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 745

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 745

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 745

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 745

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 745

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 745

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 745

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 745

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!