I have added a new element to the header and am having a hard time styling the mobile to make the menu and shopping cart not overlap. I have created a diagram of what I would hope to do. I have included the link to the diagram in the private content area. Can you help with this?
Hey thecszone!
Please add following code to Quick CSS
@media only screen and (max-width: 480px) {
.responsive #top .cart_dropdown { top: 35%; right: 45%; }
#advanced_menu_toggle, #advanced_menu_hide { right: 36%; top: 27%; }}
Best regards,
Yigit
I replied on this a few days ago but never heard back. Is there anything else you need to help me solve this?
Hey!
Some of css modifications are breaking the mobile layout of the site. Please look for these codes then remove them:
#header_main .phone-info {
width: 274px;
float: right;
margin-right: 0;
padding: 0px;
}
#header_meta {
height: 20px;
width: 308px;
float: right;
margin-right: 23px;
margin-top: 3px;
padding-top: 1px;
}
Replace it with:
@media only screen and (min-width: 768px) {
#header_main .phone-info {
width: 274px;
float: right;
margin-right: 0;
padding: 0px;
}
#header_meta {
height: 20px;
width: 308px;
float: right;
margin-right: 23px;
margin-top: 3px;
padding-top: 1px;
}
}
Best regards,
Ismael