Increase the size of the text logo on Desktop only in Dawn theme

[SweatFree]

Hi,

My website is www.sweatfree.co

The password is sweatfree123

I want to increase the size of my text logo (SWEAT FREE TELECOM) on Desktop only. Any advice? If I try to do it just through settings, then it changes it both for desktop and mobile. I only want to change it on Desktop. Also, I just want to increase the size of SWEAT FREE TELECOM. Through settings if I change it then it changes it for all the headings. I don’t want to do that either. So just increase the logo size on desktop is what I am trying to do. If you have any advice!

[Rahul_dhiman]

Hello @SweatFree

Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 307
search this code

@media only screen and (min-width: 750px) {
h2, .h2 {
font-size: calc(var(--font-heading-scale)* 2.4rem);
}
}

and replace with this code

@media only screen and (min-width: 750px) {
h2, .h2 {
font-size: calc(var(--font-heading-scale)* 3.8rem);
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Moeed]

Hey @SweatFree

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Artzen_tech]

Hi @SweatFree
Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.

1. Go to your Online Store
2. Edit Code
3. Find CSS File
4. Add the following CSS

@media screen and (min-width: 768px) {
.header__heading span{
  font-size: 30px!important;
}
}

It will increase the size only for desktop.

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

[Sweans]

Hi @SweatFree ,

To increase the size of your text logo on desktop only, you can add custom CSS to your Shopify theme. Here’s how:

1. Go to Online Store > Themes.

2. Click on Actions next to your current theme and select Edit code.

3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

4. Scroll to the bottom of the theme.liquid file, and just above the closing tag, add the following custom CSS code:

5. Click Save to apply the changes.

This code sets a larger font size for the text logo on screens that are at least 750px wide, ensuring that the change only affects the desktop view.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out! I

Regards,

Sweans

[BrijeshJoshi_1]

Hi @SweatFree , Welcome to the Shopify Community!

You can increase the size of your text logo on desktop only by adding custom CSS. Here’s how you can do it:

1. Go to Online Store > Themes in your Shopify admin.
2. Click on Actions > Edit code.
3. Find the theme.scss.liquid or theme.css file under the Assets folder.
4. Add the following CSS at the end of the file:

@media only screen and (min-width: 768px) {
  .site-header__logo .site-header__logo-image {
    font-size: 2rem; /* Adjust this value to increase the logo size */
  }
}

This code will increase the size of the text logo on desktop screens only (for screens wider than 768px).

Replace 2rem with the desired font size.

Feel free to reach out if you need more help at manshisharma106@gmail.com

Hope this helps!

[BSS-TekLabs]

• Here is the solution for you @SweatFree
• Please follow these steps:

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

@media only screen and (max-width: 600px) {
.header__heading-link .h2 {
 font-size: 32px !important;
}
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.