How to fix excerpt alignment issues under blog images in Brooklyn theme?

Store Design
1

Capture2.PNG
Capture2.PNG985×713 420 KB

website page is https://serunichome.com/blogs/stories

I use Brooklyn theme , and I changed the CSS code so that the blog post has 3 columns of blog each row.

But then the problem is that when I type in the excerpt , it doesnt align well with the image.

Can anyone give advices ?

Thank you and have a nice day

ERO

2

Hi @ero_kami

Use this trick maybe it will help you. But honestly I will re-write the css code

Bulxar_0-1650527523153.png
Bulxar_0-1650527523153.png1919×931 341 KB

3

Hi @ero_kami

Inside of your css file I would make a few changes to a couple of items.

Please see the below image as to how it looks.

Screen Shot 2022-04-21 at 5.51.28 pm.png
Screen Shot 2022-04-21 at 5.51.28 pm.png3250×1628 675 KB

I changed to this css

@media only screen and (min-width: 769px)
.template-blog main.main-content article.article.grid.small--text-center .grid__item {
    padding-left: 0;
    width: -webkit-fill-available;
}

@media only screen and (min-width: 769px)
.push--large--one-tenth {
    /* left: 10%; */
    margin-left: 10px;
    margin-right: 10px;
}

Hope this helps.

4

@ero_kami

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-blog main.main-content article.article.grid .large--two-tenths, .template-blog main.main-content article.article.grid .large--six-tenths {left: 0 !important;padding: 0px 24px !important;}