Hey there, i just adjusted some things to my theme and now my header icons are all messed up and i cant seem to get it right. Can somebody help me with this? i will show the problem down below.
LINK:https://e8aaa0-3.myshopify.com/
PASSWORD: MOHWHI
PROBLEM:
you can change the position absloute to
position unset
follow the below step
open your theme code
search the base.css file
in the base.css file
seach the following part of code
@media screen and (max-width: 749px)
details-modal.header__search {
position: absolute;
left:80px;
}
and change the position
position: unset;
intead of absloute
hey, the margin is now gone, but the logo is still not in the middle, do you have a fix for this?
that is because you icons width and height are to large on mobile simply you have need to reduce them according to your need
for this after adding the above changes you have need to go to base.css
and paste the below css
@media only screen and (max-width: 768px) {
.header__icon, .header__icon–cart .icon {
height:3.4rem !important;
width:3.4rem !important;
}
.header__icon .icon {
height:1.5rem !important;
width:1.5rem !important;
}
}
just copy and paste the above code at the end of base.css
and if you need to reduce or increase the height just change the values
