Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[GoldBuckle]

To make it as easy as possible for customers to contact us from any page on our site (discountprintingservice.com) I added this to my header.php file on line 23:

define('HEADER_SALES_TEXT2', 'Need Help? Call <b>(XXX)-XXX-XXXX</b><br><b>8AM to 10PM - 7 DAYS/WEEK!</b> (eastern standard time)<br>E-mail quote requests to <a href="mailto:[email protected]">[email protected] m</a>');

And to fill the unattractive empty white space I created an image at 1429pxx215px that I have added as a background image to my header logo wrapper by adding this to line 102 of my stylesheet.css

#logoWrapper {
width:100%;
height:215px;
background-image:url('../images/discount_printing_service_online_print_copy_shop.jpg');
background-repeat:no-repeat;
}

It looks great on my desktop but when I make the window smaller the background image is not responsive. I need it to scale down in size and I need help with the code to accomplish that.
Thanks in advance!
John

[dbltoe]

A quick trick we have used is to move the logo to the beginning of the define_main_page and make the logo wrappper a display none but, you would want to leave the center info in the wrapper.

Just one quick thought. Hope to get full power today and maybe full water this week. I'll look again when power is back

[GoldBuckle]

A quick trick we have used is to move the logo to the beginning of the define_main_page and make the logo wrappper a display none but, you would want to leave the center info in the wrapper.

Just one quick thought. Hope to get full power today and maybe full water this week. I'll look again when power is back

Thank you, hope all is back to normal for you. If you get a change to look at it again and see how I can make the background image responsive I would greatly appreciate it. All of my images on the define_main_page.php resize just fine so why is this background image not?

[dbltoe]

Thanks, we have full power but the water still has to be shut off when not in use. Waiting now on UPS to deliver the last part to make the pressure work.

You are currently overriding the responsiveness of the template by hard coding a height and width to the image. That overrides lines 12 and 13 of responsive.css which are

/* This is used to re-size images */
img{max-width:100%;height:auto;border:0;}

Still, as you may have already noticed, the logo was not designed to be a banner. It was meant to approximate the size of the column width and is set in includes/languages/english/YOUR_TEMPLATE/header.php to a specific alt text, width, height, and image name. The default width of 200 will work just fine with the template in any mode.

NOTE: I will be submitting a change to the docs as the modern browsers do not like anything but numerical information on either the store or admin logo sizes. The docs should say

define('HEADER_ALT_TEXT', 'My new alt text');
define('HEADER_LOGO_WIDTH', '200');
define('HEADER_LOGO_HEIGHT', '80');
define('HEADER_LOGO_IMAGE', 'newlogo.png');

vs

define('HEADER_ALT_TEXT', 'My new alt text');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '80px');
define('HEADER_LOGO_IMAGE', 'newlogo.png');

Next, you're going to say but, "My img is set to 207 by 100." That's just the standard logo in the middle of your banner. The background image is 1429 pixels wide! The .onerow-fluid in the stylesheet (line 24 of stylesheet.css) is already dropping that width to 75% and you want more.

You're asking the system to turn a banner that crosses over the street into a hand-held sign.

You can see some examples of how we handled this in other cases:

1. Move the logo into the define_main_page. -- https://texasleathercoozy.com
2. Make the logo smaller and center it in the presentation. -- https://enightlights.com
3. Change lots of div positions while dropping-down the side columns at a certain point -- https://haredo.com

In each of the above cases, start with a maximized browser and just click to un-maximize and use the right-hand edge of the browser to draw it left and smaller. You will see the affects of each site are different in operation with the haredo site having the most affect on legibility.

I would say that the haredo method is probably your best bet BUT, you will need to make it into ONE image that the system can work with and be legible at all stops along the way.

[mcqueeneycoins]

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!

[lat9]

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!

The underlying complexity with your request is the responsive_classic template's use of the Mobile_Detect.php class's detection of the device-type, e.g. iPhone vs iPad, making the request to your site's server. That's what determines whether/not that "hamburger menu" is created.

[mcqueeneycoins]

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

[dbltoe]

@mcqueenycoins. Somehow, you have managed to turn the responsive_classic mobile settings into a 1920 US Silver Dollar.

Missing in action. I would drop back to the original responsive_classic from your current template, use lat9's Clone a Template to make a copy of responsive_classsic to play with.

IMHO the desktop user is not going to be looking for a hamburger and will be much more likely to appreciate normal desktop navigation.

[DrByte]

Thanks for the quick reply. I understand the mobile detect element, ...

Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

The best way to "trick" mobiledetect is to tell your browser to simulate mobile. Or if it doesn't have that option (most do), you could try telling it to fake its UserAgent to that of a mobile device.

Or, use a more standards-based template like the Bootstrap 4 template, which naturally adapts to resized windows regardless of what device is in use.

[swguy]

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

Bear in mind that with responsive_classic if you are changing the browser width by squeezing or stretching the window, you have to do a refresh (often via CTRL+R) once you get to the desired width so the screen can be repainted.

A real device doesn't just change its width (unless of course you use a large hammer).