Responsive Classic Redesign Support thread

[nicksab]

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
  #contentMainWrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;}
}

to

@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

[chadlly2003]

Finally managed to get the opc css file on my site.

It looks great and it is almost there layout wise.

I just a couple of issues:

- cart only fills up half of the column

- when the hamburger menu is clicked, the overlay of OPC ( gray shadow) covers the menu and makes it unclickable

- input fields are too big

Thank you in advance for the help

Nick, just go to

stylesheet_custom_navigation.css

go to line 54
.sidebar

change
z-index:1

to
z-index:3;

[chadlly2003]

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
  #contentMainWrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;}
}

to

@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

Nick real quick i noticed you still have old code in your stylesheet_z_custom.css

remove this

.opc-view {
  position: relative;
  z-index: 2;
  box-shadow: 3px 3px 5px 6px #ccc;
  margin-bottom: 2rem;
  border: solid 1px #ccc;
  background: #fff;
  padding:1rem;
  padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

 


@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

[chadlly2003]

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
  #contentMainWrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;}
}

to

@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

I think this might be a better option the resizing your inputs for opc.
stylesheet_zcustom
Line 267
** need to change background to transparent;"

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

Site looking good. Just one thing i noticed on your product page the drop down for the date is not aligning correctly.
path: stylesheet_dp_theme.css
add to the very bottom of stylesheet

#ui-datepicker-div {
	width:auto
}

[nicksab]

Nick, just go to

stylesheet_custom_navigation.css

go to line 54
.sidebar

change
z-index:1

to
z-index:3;

thanks for that. it worked

[nicksab]

Nick real quick i noticed you still have old code in your stylesheet_z_custom.css

remove this

.opc-view {
  position: relative;
  z-index: 2;
  box-shadow: 3px 3px 5px 6px #ccc;
  margin-bottom: 2rem;
  border: solid 1px #ccc;
  background: #fff;
  padding:1rem;
  padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

 


@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

i removed all the old code that was previously added ( i think)

Unfortunately, I am back to having OPC display on the left side in a small columns instead of full screen.

[chadlly2003]

i removed all the old code that was previously added ( i think)

Unfortunately, I am back to having OPC display on the left side in a small columns instead of full screen.

hmm for some reason the #contentMainWrapper is display as grid.

this will solve your issue

stylesheet_zcustom.css
line 3891

find

  
   #contentMainWrapper {
         display: grid;
         grid-template-columns: auto 1fr auto;
     }

change to

  #contentMainWrapper {
         display: flex;
         
     }

[chadlly2003]

hmm for some reason the #contentMainWrapper is display as grid.

this will solve your issue

stylesheet_zcustom.css
line 3891

find

  
   #contentMainWrapper {
         display: grid;
         grid-template-columns: auto 1fr auto;
     }

change to

  #contentMainWrapper {
         display: flex;
         
     }

instead lets do this so it does not impact anything else on your template
add to the bottom of stylesheet_zcustom.css

#checkoutoneBody #contentMainWrapper {
         display: flex !important;
         
     }

[nicksab]

instead lets do this so it does not impact anything else on your template
add to the bottom of stylesheet_zcustom.css

#checkoutoneBody #contentMainWrapper {
         display: flex !important;
         
     }

I think this is it! Thanks for all the helps . My updated site version is finally live at belvedere-florist.com

Still need a few tweaks here and there but the template looks awesome

[nicksab]

Spoke too soon and I have another suggestions:

When on mobile and the hamburger menu is pulled out, it can only be closed by tapping outside of the menu.

It is a little tricky to do on small screen.

Would it be possible to add an "X" in the corner or similar that would close the menu?

Hope that makes sense