Shopify themes, liquid, logos, and UX
Hi team
Trying to get some help on how to fix my company name format size on mobile. Tried all the code things but the formatting isn't changing.
I'm sure there is a way to change it.
Apexarcgolf.com is the website
Hello @Apexarxgolf
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.header__heading span.h2 {
font-size: 17px !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hey @Apexarxgolf
Are you talking about your logo in the header? If yes, then
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 </body> tag
<style>
@media screen and (max-width: 767px) {
.header__heading-link .h2 {
font-size: 18px !important;
}
}
</style>
NOTE: Adjust the font size value as per your needs.
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi, what did you try? Is it that element? You can customize it in the CMS or with CSS code.
1. Click on “Online Store”: In the left sidebar, locate and click on “Online Store.” This will take you to the themes section.
2. Select “Themes”: Here, you’ll see your current active theme and any other themes you have installed.
3. Click on “Customize”: To access the theme editor for your active theme, click on the “Customize” button next to the theme’s name.
4. Locate the “Assets” folder: In the code editor, find the “Assets” folder on the left sidebar.
5. Open the CSS file: Look for a file named base.css, or something similar. Click on it to open the CSS file for editing.
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag
<style>
@media screen and (max-width: 767px) {
.header__heading .h2 {
font-size: 18px !important;
}
}
</style>
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Hello! @Apexarxgolf, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.
@media only screen and (max-width: 749px) {
.header .header__heading-link {
padding: 0.2rem !important;
}
}
Here is the screenshot of the same.
Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024