The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 05-06-2016, 07:07 PM
Loopty Loo Designs's Avatar
Loopty Loo Designs is offline
 
Join Date: Dec 2015
Posts: 2
Default

Mobile Version Breadbrumbs and Product Title Overlapping


On the mobile version of our website, when the user clicks on a product and brings up the product page, the breadbrumbs at the top and the product title are overlapping eachother.

?

Also when checking out, when you get to the last screen to place the order, the whole screen has shifted off to the right and you have to scroll right to see anything.



We need it to line up with our header.

Thanks!
  #2  
Old 05-09-2016, 01:23 PM
Tara K's Avatar
Tara K Tara K is offline
 
Join Date: Apr 2016
Posts: 43
Default

Quote:
Originally Posted by Loopty Loo Designs View Post
On the mobile version of our website, when the user clicks on a product and brings up the product page, the breadbrumbs at the top and the product title are overlapping eachother.

?

Also when checking out, when you get to the last screen to place the order, the whole screen has shifted off to the right and you have to scroll right to see anything.



We need it to line up with our header.

Thanks!
Hello,

I’m sorry to hear about the issues. The screenshots you provided are not visible as images on the forum. To make them visible you should right-click on the file on your Google Drive and choose “Get shareable link” option. But don’t worry, I was able to reproduce both issues.

I have investigated your store and found out the following. A new custom CSS theme is applied to your Ecwid. This part of the code:

Code:
.ecwid-productBrowser-categoryPath {
 position: relative !important;
 top: -35px !important;
}

.ecwid-productBrowser-head {
 position: relative !important;
 top: 30px !important;
}
made breadcrumbs overlap product titles. You should remove it to fix the issue. You probably added it to make some changes in your store. Please let me know what you intended to change, I will help you with the new code.

Concerning the “Place order” page shifted to the right. In your custom CSS theme there is a rule:

Code:
/* Move Ecwid store to the right */
.ecwid-productBrowser {
        margin-left: 215px !important;
        min-height: 300px;
}
This code moves the store pages to the right (not only the last screen to place order). Here is how I see it on my Mac in Google Chrome browser:



You can remove the code to fix the issue with the pages shifted to the right. In case you need to keep the rule for some reason, please describe what behavior of your store you expect to see (i.e. for what purpose you added this rule to the CSS) and we will assist you.
  #3  
Old 05-09-2016, 03:08 PM
Loopty Loo Designs's Avatar
Loopty Loo Designs Loopty Loo Designs is offline
 
Join Date: Dec 2015
Posts: 2
Default

We need the store to the right for the desktop version because we have vertical categories to the left. We put in the following codes that was supposed to disable that for the mobile version but it isn't consistently working. Also, every page seems to function fine except the last "place order" screen - it is the only one to the right. But once you get to the page and let's say decide to go back to another page in our store, it stays stuck to the right because you have viewed that place order screen. If you close out of the page and go back into our store, it is correct again. So it must be something with the "place order" screen.

/* Move Ecwid store to the right */
.ecwid-productBrowser {
margin-left: 215px !important;
min-height: 300px;
}


/* Disable the changes above for Mobile */
@media screen and (max-width: 320px) {
.ecwid-categories-vertical {
display: none;
}
.ecwid-productBrowser {
margin-left: 15px !important;
min-height: 0px;
}
}

What do we need to change? On the desktop we need the store to the right so our consumers can use the vertical categories on the left, but on the mobile version, we don't have the vertical categories.

Last edited by Loopty Loo Designs; 05-09-2016 at 03:14 PM.
  #4  
Old 05-11-2016, 06:40 AM
Tara K's Avatar
Tara K Tara K is offline
 
Join Date: Apr 2016
Posts: 43
Default

Hello,
Quote:
Originally Posted by Loopty Loo Designs View Post
We need the store to the right for the desktop version because we have vertical categories to the left. We put in the following codes that was supposed to disable that for the mobile version but it isn't consistently working. Also, every page seems to function fine except the last "place order" screen - it is the only one to the right. But once you get to the page and let's say decide to go back to another page in our store, it stays stuck to the right because you have viewed that place order screen. If you close out of the page and go back into our store, it is correct again. So it must be something with the "place order" screen.

/* Move Ecwid store to the right */
.ecwid-productBrowser {
margin-left: 215px !important;
min-height: 300px;
}


/* Disable the changes above for Mobile */
@media screen and (max-width: 320px) {
.ecwid-categories-vertical {
display: none;
}
.ecwid-productBrowser {
margin-left: 15px !important;
min-height: 0px;
}
}

What do we need to change? On the desktop we need the store to the right so our consumers can use the vertical categories on the left, but on the mobile version, we don't have the vertical categories.
Thank you for the explanations. You can set two rules for the widgets “Horizontal menu” and “Vertical menu”. The first rule will hide Vertical menu if screen width is less than, f.ex., 680. The second rule will show Horizontal menu if customers browses your store via a mobile device.

So when browsing the store on a desktop, your customers will see Vertical menu, and on a narrowed browser or a mobile device they will see Horizontal menu.

Here is the code:

Code:
@media screen and (min-width: 680px) {
.horizontal-menu {
    display: none !important;
}
}

@media screen and (max-width: 680px) {
.ecwid-categories-vertical {
    display: none !important;
}
}

Please let me know if this works for you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
breadbrumbs, mobile, place order screen, product, title

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:30 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.