Aligning Store Name Onto One Line (UPDATED)

Technical Q&A

Topic summary

Issue: On mobile, the store name wraps to two lines again after a previous temporary fix. The user asks how to keep it on one line and which file to edit.

Proposed fixes (both target mobile via CSS in base.css):

  • Option 1 (max-width: 768px): Remove padding on .header__heading-link and reduce the store name’s font size (span.h2) to 24px. Add these rules at the end of base.css.
  • Option 2 (max-width: 749px): Set .header__heading-link padding to 0 and .header__heading-link .h2 font-size to 24px. Steps provided: Online Store → Theme → Edit code → Assets → base.css, then paste at the bottom.

Context: Both solutions aim to force the store title to fit on a single line on mobile by shrinking the font and removing padding. A screenshot was shared but isn’t essential to applying the fix.

Status: No confirmation from the original poster yet; effectiveness of the latest CSS changes remains unverified and the thread appears open.

Summarized with AI on February 7. AI used: gpt-5.
2

Hi,

One possible way would be to remove the padding and reduce the font size of the name, for mobile phones, like below:

@media (max-width:768px) {
.header__heading-link {
  padding: 0;
}
.header__heading-link span.h2 {
  font-size: 24px;
}
}

Adding the above code at the end of your ‘base.css’ file should do the job.

GabrielS_1-1664572095283.png
GabrielS_1-1664572095283.png401×502 65.5 KB

Let me know if this was of help.

Kind regards,

Gabriel