Recipe blog text alignment

Lloydy92
Tourist
8 0 2

Hi all,
I want to use the existing blogs built into Shopify, but I need these four sections laid out like this. It also needs to be mobile responsive. Is there an easy way to do this?

Screen Shot 2021-06-26 at 5.54.24 pm.jpg

0 Likes
Natztech
Shopify Partner
2127 545 1298

hello @Lloydy92 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

0 Likes
Lloydy92
Tourist
8 0 2

Great, thank you

https://fubuki-matcha.myshopify.com/

Password: masala

0 Likes
Natztech
Shopify Partner
2127 545 1298

hello @Lloydy92 

please Go to Online Store-> Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file. see screenshot https://imgur.com/6DvkZeJ

 

@media only screen and (max-width: 749px){
.blog__article .rte__table-wrapper{
    overflow: hidden;
}
.blog__article .rte__table-wrapper table{
        width: 100% !important;
}
.blog__article .rte__table-wrapper table tr{
      display: flex;
      flex-wrap: wrap;
      height: unset !important;
}
.blog__article .rte__table-wrapper table td{
    width: 100%;
     height: unset !important; 
    flex: 0 0 100%;
    padding: 15px 0;
}
.blog__article .rte__table-wrapper table td p.p1{
         margin: 0 !important;
} 
}

 

 

Lloydy92
Tourist
8 0 2

Thanks for providing that code!

Originally I had it in a table that was turned white hence why it worked on desktop. The only issue is it didn't line up the text properly.

Are you able to write that code so automatically places the four sections in the right location on desktop too?

Thanks in advance!

0 Likes
Lloydy92
Tourist
8 0 2

So mobile looks great.

When viewed on the desktop I wanted it coded to automatically look similar to the below with the exception of the Prep Time a bit higher up to be in line with the Cook Time.

Right now it's just in a table, so I want to delete the table and the code can automatically generate the placement.

I hope that makes sense. 

0 Likes
tafer83
New Member
1 0 0

Yes there is very simple way for better text alignment you can see some demo blog websites where this alignment is used that you required. I hope it will help you to find that alignment.

0 Likes