Header Logo is too small on mobile and not centred on desktop

Store Design
1

Hi can someone help me! Over been searching all day to find a solution, editing code etc and nothing seems to be working!

Im using the Venture theme in Shopify and would like to edit my logo to be larger on mobile view and stay centred (it is centred in mobile view already) but I would like it to remain the same size as it currently is on desktop but it needs to be centred as it’s currently aligning more to the left.

My store is ivybbusiness.com for reference.

Thanks in advance! This is driving me crazy!

1 Like
2

@Ivybdesign , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .site-header__upper > * > *:nth-child(2){
    max-width: (100% + 500px) !important;
    width: 100% !important;
    padding-right: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__upper > * > *:nth-child(3){
    max-width: 0px !important;
}

.site-header__upper > * {
    display: flex;
    align-items: center;
    justiy-content: center;
}

}

diego_ezfy_0-1650422157907.png
diego_ezfy_0-1650422157907.png1831×492 565 KB

Kind regards,
Diego

3

@Ivybdesign

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .site-header__upper > * > *:nth-child(2){
    max-width: (100% + 500px) !important;
    width: 100% !important;
    padding-right: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__upper > * > *:nth-child(3){
    max-width: 0px !important;
}

.site-header__upper > * {
    display: flex;
    align-items: center;
    justiy-content: center;
}

}

Thanks!

4

This just sent my shop into an error, did not work :confused:

5

@Ivybdesign

The code does work. If it was added in the wrong place or has any other typos, it won’t work. What error is it showing?