mobile alignment

Shopify Discussion
1

could anyone help me i added a code to the base.css file which makes the sub-menus sub-menu appear on the right side which now leads the mobile view dropdown and search to glitch. kindly help me with the issue

2 Likes
2

You can wrap your custom css in the following code:

@media only screen and (min-width: 600px) {
/* your custom css */
}
3

ul.header__submenu details[open] > .header__submenu {
position: absolute;
left: 100%;
border-radius: var(–popup-corner-radius);
border-color: rgba(var(–color-foreground), var(–popup-border-opacity));
border-style: solid;
border-width: var(–popup-border-width);
box-shadow: var(–popup-shadow-horizontal-offset) var(–popup-shadow-vertical-offset) var(–popup-shadow-blur-radius) rgba(var(–color-shadow), var(–popup-shadow-opacity));
background: var(–gradient-background);
top: 0;
}

ul.header__submenu details[open] > .header__menu-item .icon-caret {
transform: rotate(270deg);
}
This is the code
This is the url: https://4acb3b-d1.myshopify.com/
any my issue are on the pictures below. Thank you

Untitled.png
Untitled.png1913Ă—282 163 KB

Untitled2.png
Untitled2.png788Ă—476 209 KB

4

Thank you, it did work but now the product collection boxes are all over the place.

5

@Sayed_Safin no unfortunately it still didn’t work..

6

@Sayed_Safin hello, sorry for not being available. yes upon clicking them it doesn’t lead anywhere ig because of default settings set on it. would be extremely helpful if that largening of the product category box could be fixed. it would be really helpful if you could turn those words into clickable buttons which lead me to pages otherwise it completely okay. thank you so much

7

@BSS-TekLabs Hello, thank you for helping but unfortunately it didn’t work. could you recommend anything else?