How can I enlarge my logo on both mobile and desktop in parallax theme?

Store Design

Topic summary

A user seeks to enlarge their store logo on both mobile and desktop versions using the Parallax theme.

Solutions Provided:

Three community members offered CSS-based solutions involving:

  • Editing the theme.liquid file in the theme code editor
  • Adding custom CSS before either the </body> or </head> tag
  • Adjusting max-width, max-height, and object-fit properties for both desktop (.logo .image-element__wrap img) and mobile (@media queries targeting #header.mobile_logo img)

Current Issue:

The original poster reported that while solutions were provided, the mobile implementation resulted in misalignment—the logo appears left-aligned instead of centered.

Status: The discussion remains open with the user requesting guidance on how to fix the centering issue on mobile devices.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to make the logo bigger on mobile and desktop too. I appreciate your inputs.

https://itcelanahi.com/

Thanks

2

Hello @urbantis ,

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.logo .image-element__wrap {
width: 250px !important;
}
@media only screen and (max-width: 798px){
#header a.mobile_logo img {
max-width: 180px !important;
max-height: 50px !important;
object-fit: contain;
}
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

3

Hello @urbantis ,

Welcome to Shopify Community !

I wanted to offer a potential solution to assist you. Here are the steps to follow:

  1. Navigate to the Online Store section of your Shopify account, and select the Theme option.

  2. Click the Edit code button.

  3. Open the theme.liquid file.

  4. Paste the following code before the closing tag :

    SaaSEnthu_0-1673003530413.png
    SaaSEnthu_0-1673003530413.png1564×916 55 KB

.logo .image-element__wrap {
width: 300px;
}

@media screen and (max-width: 798px) {
#header .mobile_logo img {
max-width: 220px;
max-height: 60px;
object-fit: contain;
}
}​

This is how it should look after code implementation :

SaaSEnthu_1-1673003604867.png
SaaSEnthu_1-1673003604867.png1316×773 149 KB

Let me know if need further assistance from my end.

4

@urbantis
Put below css into theme.liquid file before tag

Ujjaval_0-1673004528417.png
Ujjaval_0-1673004528417.png1600×756 211 KB

Ujjaval_1-1673004647916.png
Ujjaval_1-1673004647916.png1600×682 107 KB

5

Thank you for your reply, however in mobile version the logo is not centered (it is showing moved to the left) is there a way to fix this? Thanks for your time