Solved Templates

Responsive Mode Shopin Template Layout

Asked by Mark 4 years ago Last activity 4 years ago

I have a problem with shopin template tried for many hours to fix but beyond my knowledge.

In tablet and mobile view menu and search/account icons show below header.

I have tried to enter css in custom css but not working. Also not sure if column layouts are correct in template.

The code I have added is in the custom.css file starts line 270.

Accepted answer

Marked as the solution

Mehtaz Afsana Borsha Staff

4 years ago

Use this custom CSS

@media (max-width: 820px){
div#sp-top1 {
    position: relative;
    bottom: 212px !important;
}
}

5 more replies

Mehtaz Afsana Borsha Staff

4 years ago

Thanks for contacting us. You can use this custom CSS

.sp-megamenu-wrapper{
  margin-top:0px !important;
}
#sp-top1{
      padding: unset !important;
}


@media (max-width: 820px){
  div#sp-top1{
      position: relative;
    bottom: 140px;
}

#offcanvas-toggler{
        position: relative;
    bottom: 65px;
  right:10px;
}
.sp-module.top-search{
          position: relative;
    bottom: 65px;
  right:10px;
}
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

-Regards.

Mark Asked this

4 years ago

Thanks for your reply I have added the code to the custom.css file but the cart doesn't show or shows of the page when clicked. Do you have a fix please

Regards Mark

Mehtaz Afsana Borsha Staff

4 years ago

It seems ok on my end. Could you please give me a screenshot of your issue?

Mark Asked this

4 years ago

Hello Mehtaz sorry for the delay

When viewing in mobile view and clicking or hovering the cart icon it should show cart however it does not. j2store-cart-info open it shows normally on tablet and fullscreen.

Thanks regards Mark

Mark Asked this

4 years ago

Hello Mehtaz

See video here with problem. https://www.youtube.com/watch?v=yE8avf1d_MU

Thanks regards Mark