To add an icon and some text below the icon in dawn theme

hashbrowns
Visitor
2 0 0

I wanted to add 3 icons one after the other horizontally and below each icon wanted to describe the feature we offer, but I did not find that in dawn theme, so to find another way out I added an Image section inside footer, set the image to 150px and added  3 images and then I added a 3 text blocks after the images so it came one below the other in Desktop view as shown below (or in attached images) :

hashbrowns_0-1708972347337.png

Now when I try to check my mobile view it gives me a view as show below (or in attached images) :

hashbrowns_1-1708972440170.png

So my requirement as mentioned in the subject i.e. to add an icon and some text below the icon in dawn theme is not fulfilled in mobile view, also the images(icons) in the mobile view are much larger than required.
So please, either tell me a way to add an icon and some text below the icon in dawn theme for both the views or help me resolve my mobile view as required.
Thanks and Regards,
HashBrowns.in

Replies 2 (2)

sanico-software
Shopify Partner
47 0 9

Hey Hashbrowns, 

 

The images are not stacking on the text with mobile since you are actually storing things in two rows. The images are in the first row and the text is in the second row. What you are looking for is a combination of columns to help your content stack the way you expect on mobile. 

 

Click "Add a Section" on your Dawn Theme

 

add-a-section.png

 

Search for Multicolumn

 

search-for-multicolumn.png

 

Now you can choose a photo for each column which pairs up with text.

choose-an-image-for-the-column.png

 

Select the Section to have None for the Secondary background if you dont want the shaded boxes. 

make-secondary-background-none.png

 

Now you have a multi column structure with images and text that will stack on mobile. 

 

Screen Shot 2024-02-27 at 8.59.46 am.png

 

Here is an example of it on mobile stacking. 

the-columns-now-stack.png

 

I hope this helped! Let me know if you have any other questions or please mark this as an accepted solution if it did in fact help 🙂

 

Good luck with your store moving forward Hashbrowns!

Dom Tripodi | Sanico Software
I am a Software Engineer based in Adelaide, Australia and I build ecommerce websites with Shopify for local and international businesses. If you want to take your Shopify store to the next level, I am the guy. Check out Sanico Software here.
hashbrowns
Visitor
2 0 0

Thank you for your kind  suggestion but I do not want images instead i want icons there just because i could not find that option i was using images, I will share a screenshot from a website so that you better understand my requirement,  This is something exactly what I need:

hashbrowns_0-1709217720230.png