Responsive Font Size in Pages

[gaiapetshop]

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.

Thanks!

[ThomKnepper]

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?

[gaiapetshop]

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 

[ThomKnepper]

So for this page I see you've worked with a <table> tag. I would highly recommend you to rewrite this page with a grid (using CSS) as this is 1000% more easy to make responsive.

[gaiapetshop]

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

[ThomKnepper]

Hi,

Its quite an easy change to make! 

I would recommend code similar to this:

<div class="grid-wrapper">
   <div class="grid-item">
      <img>
      <p>[name]</p>
   </div><!--use this block for each logo-->
</div>

.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! 

[ThomKnepper]

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

[gaiapetshop]

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