Responsive Classic Redesign Support thread

chadlly2003:

To get the hamburger on the right side are just need to make some minor adjustments to the css. Let me know if you need anything else.

Step 1

Path: \includes\templates\responsive_classic\css\stylesheet_custom_navigation.css
line: 12

**find this **
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}

replace

.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}

find this
line40

.sidebar.is-hidden {
transform: translateX(-300px);
}

**change to **
.sidebar.is-hidden {
transform: translateX(300px);
}

Step 2
path: includes\templates\responsive_classic\css\stylesheet_zcustom.css
Paste at bottom of page

.nav_spacer {grid-template-columns: 3fr 1fr auto !important;}
.nav_spacer .row {order:2}
.baralignment {margin-left:1rem;}

@media (min-width: 576px) {
.nav_spacer {grid-template-columns: 3fr 2fr auto !important;}
}

@media (min-width: 992px) {
.nav_spacer {grid-template-columns: 1fr 2fr 1fr auto !important;}
}

Thank you

Another question:

How do I get the logo to be in the center of page on desktop?

I removed search_header via admin but I can't figure how to have the logo in the middle of the logoWrapper.

Thank you for the assist

Just put this piece of code at the bottom of stylesheet_zcustom.css. I believe this is what you are looking for

**Dont forget to remove the search bar. **

.nav_spacer {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: left;
  align-items: center;
  margin: auto;
}


#logoWrapper {
  display:flex;
  justify-content:center;
}



@media (min-width: 992px)  {

.nav_spacer {
grid-template-columns:1fr 2fr 1fr}

}

thank you.

How do you increase the width of the left column?

I tried several values via Admin - Configuration- Layout Settings but it is not changing.

How do you hide the left column to display on mobile? CSS?

Thank you

"How do you increase the width of the left column?"
You just need to find the style below and change the width via css

Path: stylesheet_zcustom.css
line:3158

 .onerow-fluid>[class*="col150"]:nth-child(1){
  padding-left:0rem;
  margin-right:2rem;
  width: 220px; [B]<-- change the width here -->[/B]
  display:block;

"How do you hide the left column to display on mobile? CSS?"
Not sure I understand the question. Can you give a little more detail.

chadlly2003:

"How do you increase the width of the left column?"
You just need to find the style below and change the width via css

Path: stylesheet_zcustom.css
line:3158

.onerow-fluid>[class*="col150"]:nth-child(1){
padding-left:0rem;
margin-right:2rem;
width: 220px; [B]<-- change the width here -->[/B]
display:block;

> 
> 
> 
> **"How do you hide the left column to display on mobile? CSS?"**
> Not sure I understand the question.  Can you give a little more detail.


Thank you but why not use the admin config for  this? it would make it easier to adjust.

As for \[B],  the left colum appears on mobile but it  was my mistake. If you change  the size of the column in the admin (ie 150 px to  400px) , the class seems to change as well. ( ie class=col150 becomes class=col400)

as a result, the css  gets a bit messed up.

Great job on accessibility, CSS, and HTML.

There's one thing you need to consider that most checkers do not notice. That's text-decoration on links.

Accessibility rightly expects that something on the screen will alert the customer to the fact that there is an available link to another part of the page or site. Normally, that's done with text-decoration: underline. I can understand your desire to avoid a main page full of underlined text. Technically, you are okay on a desktop as you have the cursor changing when hovering over a link.

The problem arises when the site is viewed on a mobile device. Since there is no cursor on a mobile device, you can't rely on the cursor changing to a pointer as a way of letting the customer know there's a link at that spot.

You might want to consider dropping the text-decoration: none on line 9 of stylesheet_colors.css when a mobile device is detected.

nick,

This is a custom template. I tried to follow all the rules but sometimes the backend setting can impact the custom css. In the near future I will update the template to make it easier to update the css elements using the backend of zencart. Too be continued....

dbltoe,

I will make the adjustments you requested on my next upgrade. This should be straight forward. Also if you see anything else let me know and i will add it to my "To DO List"

I really like that on desktop scaling the layout is scaling 1:1

What the original responsive_classic cannot do.

I am having issue with product listings. It displays 3 items per row but it is really small ( see screenshot) It can also been seen here: https://www.royal-fleur.com/belvedere/index.php?main_page=index&cPath=25

No mods to the templates except for the full width template and hamburger on the right.

I am using ZC. 2.1 with checkout one page and Image handler.

How can I get the images and product listing "bigger"?

Thank you

Something change on your template. For some reason you now have a width of 32.5% on centerBoxContentsProducts centeredContent back gridlayout. That is why you are having issue with the size. To troubleshoot lets try putting the category template back to its original settings. Then you can just change the size in the backend or css. See if that changes anything. Let me know if that works if not I will do a quick troubleshoot for you and have a quick resolution. This should not be difficult to solve.

One more thing I noticed you have size on a lot of your images. For example you have the banner spring collection has a width of 930px. Take the width off to fix the pixelation and fix the responsiveness.

ps: I like what your doing so far. Keep it going.

chadlly2003:

Something change on your template. For some reason you now have a width of 32.5% on centerBoxContentsProducts centeredContent back gridlayout. That is why you are having issue with the size. To troubleshoot lets try putting the category template back to its original settings. Then you can just change the size in the backend or css. See if that changes anything. Let me know if that works if not I will do a quick troubleshoot for you and have a quick resolution. This should not be difficult to solve.

I saw the "32.5%" but I can't find where or what it is specifying it.

I cloned your template before doing any changes to it. Even if I switch to the responsive classic template, I am getting the same display issue.

I also uploaded the original tpl_index_category and tpl_index_product_listing but no luck.

No idea where I could have mess things up somehow.

Thank you for your assistance on this.

Nick,
I just took another look at your issue. Was a little busier earlier in the day,

You made some changes to in the file path below which caused a conflict with the template.

This will solve your issue. From here you can change the size of the category image in the backend.

path:\includes\modules\responsive_classic\category_row.php
line 82

Find

 $style = '';
    if ($category_row_layout_style === 'columns') {
        $style = ' style="width:' . $col_width . '%;"';
    }

Replace with

$style = '';
   if ($category_row_layout_style === 'columns') {
       $style = ' style=""';
   }

chadlly2003:

One more thing I noticed you have size on a lot of your images. For example you have the banner spring collection has a width of 930px. Take the width off to fix the pixelation and fix the responsiveness.

ps: I like what your doing so far. Keep it going.

Not sure about the other images but the one you referenced "Spring Collection" is not a technically a banner but an image inserted in the category description. These descriptions are stored in mysql.

I am working on updating an old site from 1.5.6 to 2.1.0 so there is a lot to fix. The ZC and template files are new but the database is an updated version of the old site.

I could set these width and height to auto. Would it help with the pixelation?

Thank you again for the help

nicksab:

Not sure about the other images but the one you referenced "Spring Collection" is not a technically a banner but an image inserted in the category description. These descriptions are stored in mysql.

I am working on updating an old site from 1.5.6 to 2.1.0 so there is a lot to fix. The ZC and template files are new but the database is an updated version of the old site.

I could set these width and height to auto. Would it help with the pixelation?

Thank you again for the help

nick look at my previous post. lets get that solved then we can fix the other issues....

chadlly2003:

Nick,
I just took another look at your issue. Was a little busier earlier in the day,

You made some changes to in the file path below which caused a conflict with the template.

This will solve your issue. From here you can change the size of the category image in the backend.

path:\includes\modules\responsive_classic\category_row.php
line 82

Find

$style = '';
if ($category_row_layout_style === 'columns') {
$style = ' style="width:' . $col_width . '%;"';
}

> 
> **Replace with**
>  ```
$style = '';
    if ($category_row_layout_style === 'columns') {
        $style = ' style=""';
    }

I checked both files in \includes\modules\responsive_classic\category_row.php and \includes\modules\Belvedere\category_row.php and they both seems to have the correct code around line 82.

However, I checked the file in \includes\modules\category_row.php and made the change there in case the overrides would not work.

Unfortunately, I am still having issue with the display for the products. Maybe it is a setting in my store backend. I will try with a fresh install of the templates and ZC and see if it does the same thing.

hmm it something you changed. Could be a setting in the backend you changed or a piece of code taken out. Let me know what happens after your install.