Responsive Classic Redesign Support thread

chadlly2003:

Nick,

This is just a suggestions. This will fix the logo and clean up the header. It will also hide the category sidebox on mobile.

if you put this on the very bottom of your stylesheet_zcustom.css.

.onerow-fluid > [class^="col"]:nth-child(1) {
display: none;
}
div#logo {
max-width:100% !important;
width:100% !important;
margin-left:0px;
}

@media (min-width: 992px) {
.onerow-fluid > [class*="col"]:nth-child(1) {
padding-left: 0rem;
margin-right: 2rem;
display: block;
width: 220px;
}
}

@media (min-width: 1300px) {
div#headerWrapper {
margin-left:15px !important;
margin-right:15px !important;
}

}

Thank you . I will  give these a try  and report back

nicksab:

I am familiar with these. My main issue is that the whole container is on the left of the page on full screen.

I am assuming ,since there is no left column, it gets shifted to the left. It would be nicer if it stayscenter to the page regardless of the screen size.

What is your setting for Admin >> Configuration >> Layout Settings >> Use split-login page? Setting it to true will cause it to use the screen's width.

dbltoe:

What is your setting for Admin >> Configuration >> Layout Settings >> Use split-login page? Setting it to true will cause it to use the screen's width.

It is set to "false"

Setting to "true" shrinks it in half.

Strangely, it displays as one column while OPC works on up to 3 colummns. I may have to uninstall/reinstall OPC just to make all files are there.

How do I remove " search header" on small screen?

It is a nice touch on full screen/desktop but too distracting on mobile.

Maybe it could be replaced by "magnifying glass" next to cart on mobile? just an idea

To Hide searchbox on mobile only add this to the bottom of stylesheet_zcustom.css

.search_box_mobile {
	display:none !important;}
#headerWrapper {
	padding-bottom:0px;}

@media (min-width: 576px) {
.search_box_mobile {
	display:block !important;}

#headerWrapper {
padding-bottom:1rem;}
}

I did some digging and experiment regarding my login page display issue when using OPC.

if you put this on the very bottom of your stylesheet_zcustom.css.

@media (min-width: 992px) {
.onerow-fluid > [class*="col"]:nth-child(1) {
padding-left: 0rem;
margin-right: 2rem;
display: block;
width: 220px;
}
}

If I removed "width:220px" from zcustom.css, my login displays ok ( full  page  as opposed to stuck on the left  side on desktop)

However, it brings back my left column issue. It is really small on big screen per say.  Not sure how I can get my left colum wider. Admin setting are ineffective.

Thanks everyone  for the help on this as always

I still struggling with the layout of my login pafe using OPC

If i remove the "width" in the code below, added to zcustom

@media (min-width: 992px) {
  .onerow-fluid > [class*="col"]:nth-child(1) {
    padding-left: 0rem;
    margin-right: 2rem;
    display: block;
    width: 220px;
  }
}

It seems to helps but not quite there yet. It is also messing up my left column width.

If i switch from a grid to block display, the OPC is display full screen but I lose all responsiveness ( blank login screen on mobile for example).

Why would left column css affect the OPC display is beyond me

Keep in mind that sizing calls (width, margin, padding, etc.) of 0 (zero) should not have em, px, rem, %, or any other addition—just the 0.

dbltoe:

Keep in mind that sizing calls (width, margin, padding, etc.) of 0 (zero) should not have em, px, rem, %, or any other addition—just the 0.

thanks i will double check for that.

Sorry about the double post. I thought my first post didn't go thru but was somehow delayed

Issue with radio button on product info page (see example below)

https://www.royal-fleur.com/belvedere/index.php?main_page=product_info&cPath=25&products_id=2716

When a product has a radio button attribute, the button gets staggered instead of being on one column like the checkbox button.

The option name for text attribute does not match the others ( i.e Desired Delivery Date). It should be in blue like the others above it in my example. H4 css is there but it is not being displayed somehow.

Thank you in advance for the help.

nick pm me your email and i will send the a updated file that will fix your issue you mentioned in prvious post. I have been having some issue log into zencart.

Just an FYI on this template

I’ve made a number of updates to the template over the past week.

I’ve also streamlined the top navigation bar. You can now easily reorder items or move the hamburger menu to the left or right using the CSS order property—no code changes needed.

In addition, I addressed all the feedback from earlier and cleaned up the layout by removing unnecessary grid elements and replacing them with flexbox. This makes the layout more stable and ensures that adding new elements won’t break the design.

Just an FYI on this template

I’ve made a number of updates to the template over the past week. - you can grab latest version on github

I’ve also streamlined the top navigation bar. You can now easily reorder items or move the hamburger menu to the left or right using the CSS order property—no code changes needed.

In addition, I addressed all the feedback from earlier and cleaned up the layout by removing unnecessary grid elements and replacing them with flexbox. This makes the layout more stable and ensures that adding new elements won’t break the design.

chadlly2003:

nick pm me your email and i will send the a updated file that will fix your issue you mentioned in prvious post. I have been having some issue log into zencart.

Thank you for the provided changes/file.

2 issues though:

• my hamburger menu is on the right but the menu pops out on the left when clicked

• the search header looked "shrinked" a little and how can i get it to the right? it is too close to my logo

https://www.royal-fleur.com/belvedere/

Thank you for the assistance

nick i sent you an email with the adjustments you wanted.

nicksab:

Thank you for the provided changes/file.

2 issues though:

• my hamburger menu is on the right but the menu pops out on the left when clicked

• the search header looked "shrinked" a little and how can i get it to the right? it is too close to my logo

https://www.royal-fleur.com/belvedere/

Thank you for the assistance
It looks like a lot of changes but i did this more to match your site. I wanted to show you the changes I made to make this happen

stylesheet_custom_navigation.css
Line 12

change find:

 left:0;

change to

right:0;

line:40;
find: ```
translateX(-300px)

change to
find: ```
translateX(300px)

stylesheet_zcustom.css
find
line:4029

div#logo {
max-width:100% !important;
width:100% !important;
margin-left:0px;
}

replace with

div#logo {
max-width:400px !important;
width:100% !important;
margin-left:0px;
}

.search_box form {
  display:flex;
}

LINE 3870
find

.search_box {
    display: block;
    text-align: center;
    margin-left: 1.5rem;

replace with

.search_box {
    display: block;
    text-align: center;
    margin-left: 1.5rem;
    flex-grow:1;

line 2702
find

.button.button_search {
 width: auto !important;
}

change to

.button.button_search {
 width: auto !important;
 margin-left:0px;
}

have one more suggestion to make the home page images extend correctly

stylesheet_zcustom.css. This will make your homepage image cover the full width
after line 2748 add this

    #indexHomeBody  .rblockelements {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

chadlly2003:

have one more suggestion to make the home page images extend correctly

stylesheet_zcustom.css. This will make your homepage image cover the full width
after line 2748 add this

 #indexHomeBody  .rblockelements {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
 }

Thank you for the help.

he header looks better ( see screenshot attached) but  search header  is a bit long now.  



Would it be possible to have  the search header to the right and shorter?

I attached a photoshop look to show what I am after. 



I also did some css touch up on the one page checkout page / login and  it is getting close.

nicksab:

Thank you for the help.

he header looks better ( see screenshot attached) but search header is a bit long now.

Would it be possible to have the search header to the right and shorter?

I attached a photoshop look to show what I am after.

I also did some css touch up on the one page checkout page / login and it is getting close.

just put this at the bottom of your stylesheet custom.css.

@media (min-width: 992px) {
	.search_box form {
   	display:flex;
   	}

  	.search_box {
     	flex-grow:0.5;margin-left:auto;
  	}
 
	.shoppingcart {margin-left:0 !important;}
 	}

}

Just a suggestion. When you view your responsiveness at 992px the logo is a bit large. Might want to make it a little smaller.

Nick if you have anymore feedback for the template please let me know. Was it easy to make changes. I did make a lot of adjustments based off of your previous post.

chadlly2003:

just put this at the bottom of your stylesheet custom.css.

@media (min-width: 992px) {
.search_box form {
display:flex;
}

.search_box {
 	flex-grow:0.5;margin-left:auto;
}

.shoppingcart {margin-left:0 !important;}
}

}

> Just a suggestion. When you view your responsiveness  at 992px the logo is a bit large. Might want to make it a little smaller.
> 
> 
> Nick if you have anymore feedback for the template please let me know.  Was it easy to make changes.  I did make a lot of adjustments based off of your previous post.

Thank you Chad. It worked perfectly