How can I decrease the mobile font size, while retaining the font size of desktop view?

Store Design
,

Topic summary

Goal: Reduce mobile font size without changing desktop size on a Shopify store.

Key suggestions:

  • Edit Assets > main.css and add a mobile-only media query to lower the base font variable: @media (max-width: 768.98px) { :root { --body-font-size: 14; } }. This targets screens ≤768.98px and adjusts font sizing via a CSS variable.
  • Insert custom code in theme.liquid (Shopify’s main layout file) either above or . Exact code content was not provided in the thread, but the intent is to apply mobile-specific styling there.

Context notes:

  • main.css is the theme’s stylesheet; theme.liquid controls the overall page structure where global scripts/styles can be injected.
  • The original poster expressed thanks; no explicit confirmation of which method solved the issue.

New topic raised:

  • OP asked if a Shopify store can feature another website (example: abenson.com). A responder confirmed it’s possible and asked about placement; OP inquired about hiring services.
  • Images/screenshots were shared to illustrate the external site example and possible placement.

Status: Primary issue appears guided but not definitively closed; follow-up (external site feature) moved toward a service discussion and remains open.

Summarized with AI on December 15. AI used: gpt-5.
1

Hi Shopify Community!

I just wondering if you could help me decrease the mobile font size, while retaining the font size of desktop view? Here is my shop link : https://ingcostores.com/ .

I really do appreciate your help!!!

Sincerely,

Jayson

1 Like
2

Hi @baynojayson ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
3

Hi @baynojayson ,

Please go to Actions > Edit code > Assets > main.css file and paste this at the bottom of the file:

@media (max-width: 768.98px) {
:root {
    --body-font-size: 14;
}
}
4

Hi @baynojayson ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above

If it helps you, please like and mark it as the solution.

Best Regards :blush:

1 Like
5

Wow!! Really thanks for your help my friend!! I do really appreciate your kind assistance

6

Hi Makka.

I am just wondering if this is possible for shopify, wherein in one store it could feature other website. https://www.abenson.com/

baynojayson_0-1730266405687.png
baynojayson_0-1730266405687.png3393×1889 681 KB

7

Hi @baynojayson ,

This is possible, would you like to add it here?

Screenshot.png
Screenshot.png904×112 4.32 KB

8

Yes correct :slightly_smiling_face: May I know if you could offer your service ? :slightly_smiling_face:

Thank you Namphan