How do I adjust responsive font size for different devices?

Technical Q&A
,
1

I understand that shopify sites are formatted according to screen size, e.g. mobile browser, desktop browser, full screen. How do I adjust font sizes so that they are viewable and look pretty regardless of being viewed on what device?

i attach two screenshots, one from a desktop browser width, one from mobile browser width. i need help scaling down the font size in mobile browsers.

wide screen
wide screen1338×884 149 KB

narrow screen
narrow screen433×884 56.9 KB

Thanks!

2

Hi there,

It looks like you have done some custom coding on this one. The easiest thing to do is to simply set a CSS viewport and make the items full width or 50% of width so that the title shows.

Do you have a link we can preview and help you out further?

3

Thanks for the quick response!

You’re right. There was custom coding done for this and unfortunately, i am only trying to learn how shopify works when i took over.

Apologies i forgot to add the link!

https://gaiapetshop.com/pages/brands-we-love

4

So for this page I see you’ve worked with a

tag. I would highly recommend you to rewrite this page with a grid (using CSS) as this is 1000% more easy to make responsive.

5

Thanks for your recommendation. is it an easy change to make? I will have to go read up on grids.

6

Hi,

Its quite an easy change to make!

I would recommend code similar to this:


   

      
      

[name]

   


.grid-wrapper{
   display: grid;
   grid-template-columns: repeat(5, 3rem);
   grid-template-rows: auto;
}
.grid-item{
   display: grid;
   grid-template-rows: 5rem 1rem;
   justify-items: center;
}

@media screen and (max-width: 800px){
.grid-wrapper{
   display: grid;
   grid-template-columns: repeat(2, 3rem);
   grid-template-rows: auto;
}
}

Hope this helps!

7

Yes it is!

Make one div with as a wrapper and then just load in all the logo divs in.
Make a grid on the wrapper. A quick Google search will make sure you got it
figured out quite quickly.

Or check: https://www.w3schools.com/css/css_grid.asp

8

thank you so much! i’ll go try it out!