FROM CACHE - en_header

Right Padding on Desktop Version of Mobile Site

Solved
kaiyacollects
Explorer
47 1 21

Hi,

 

I am trying to fix this issue where on my mobile site (desktop version) there is a padding on the right side. 

I would like to remove this space. 

www.kaiyascollectibles.com

Pw = yaya

Thanks!

Screenshot_20210613-112433.png

  •  

Screenshot_20210613-112412.png

Accepted Solution (1)

Accepted Solutions
g33kgirl
Shopify Partner
331 96 117

This is an accepted solution.

@kaiyacollects add this code at the end of your CSS file:

@media screen and (min-width: 769px) {
.site-header .grid__item.large--one-third.medium-down--one-half {
    left: 0;
}
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 6 (6)
g33kgirl
Shopify Partner
331 96 117

Hi @kaiyacollects, in your CSS file add this to the end of the file:

.site-nav {
    right: 10px;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
kaiyacollects
Explorer
47 1 21

Thanks for the help/reply!

That line of code moves the nav items to the further right on the desktop site, but the white border remains on the desktop version for mobile.

 

Any thoughts?

g33kgirl
Shopify Partner
331 96 117

@kaiyacollects I cannot see the white border you are talking about. Can you post a screenshot?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
kaiyacollects
Explorer
47 1 21

Screenshot is taken from a mobile device (using Google Chrome) with "Desktop Site" Checked.

 

Unknown.png

g33kgirl
Shopify Partner
331 96 117

This is an accepted solution.

@kaiyacollects add this code at the end of your CSS file:

@media screen and (min-width: 769px) {
.site-header .grid__item.large--one-third.medium-down--one-half {
    left: 0;
}
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
kaiyacollects
Explorer
47 1 21

Nailed it!! 

 

Thanks for all your help on this. Really appreciate it.