Images are small in mobile and tablet.

Yes, I am using version 2.1.0 I did everything in the admin configuration in the image. I can't seem to get the image larger mostly in the product listings and the new product module on the mobile and tablet devices. Is there an add-on to fix this or what can I do?

Wade

Quote:

---

Originally Posted by wmorris

Yes, I am using version 2.1.0 I did everything in the admin configuration in the image. I can't seem to get the image larger mostly in the product listings and the new product module on the mobile and tablet devices. Is there an add-on to fix this or what can I do?

Wade

---

Just came to my attention on the tablet devices on the web browsers like (Chrome, Firefox and Safari) if you set zoom to normal which is 100% its a normal desktop version on the screen but if you set the zoom to 150% it looks like a mobile version. How to keep 100% zoom as a mobile version.

https://www.galaxyhomedecor.us/images/tablet-ipad.PNG

A link to the website or at least the template you are using will be necessary to help you

Quote:

---

Originally Posted by mprough

A link to the website or at least the template you are using will be necessary to help you

---

Yes, the website address is https://www.galaxyhomedecor.us/ and the template I am using is Fluorspar.

Well, on my old iPhone 7, images can't be bigger without having to scroll sideway, at least on vertical viewing... And on my iPad Air, whatever zooming I do, everything looks like on my Desktop.
Perhaps, you could give more details on what you do, with what hardware, what setting/file code you tried to change...
By the way, all this is template related and should be in the Fluorspar support thread.

This is an easy fix.
You need to make you images responsive.

I noticed that the images on the product page look like
max-with:100%;
height:auto;

You need to remove the height and add a width of 100%


max-with:100%;
width: 100%

Utilize you media queries to make it look.

Also please note you should not worry about zooming in... it has nothing to do with the way your site looks.

You have to use the media queries to solve the issue you are experiencing.

I also noticed on the product page you have a width of 80% on you mobile view of the image. Change it to 100% and that will also solve your issue

Quote:

---

Originally Posted by chadlly2003

This is an easy fix.
You need to make you images responsive.

I noticed that the images on the product page look like
max-with:100%;
height:auto;

You need to remove the height and add a width of 100%


max-with:100%;
width: 100%

Utilize you media queries to make it look.

---

What file do I need to edit? Also, how can I make the main menu responsive?

path: includes/templates/fluorspar/css/responsive.css
issue is on line 40

find
#productMainImage
width:80%

change to
width:100%


Just a suggestions:
This template needs some work to make it responsive. I am not sure if you are interested but there is a new template that zencart team has built that will fix all your responsive issues.


https://www.zen-cart.com/downloads.php?do=file&id=2403

Quote:

---

Originally Posted by chadlly2003

path: includes/templates/fluorspar/css/responsive.css
issue is on line 40

find
#productMainImage
width:80%

change to
width:100%

---

Ok, how to make the menu bar responsive with a hambuger?

It looks like you already have a hamburger menu on your template. As mentioned to make it look good on all devices you are going to have to edit the css files within your template.

Quote:

---

Originally Posted by chadlly2003

It looks like you already have a hamburger menu on your template. As mentioned to make it look good on all devices you are going to have to edit the css files within your template.

---

I am not talking about the mobile version. Mobile version is fine. I am talking about iPad/Tablet version.

To get the hamburger menu to display on tabet

You need to find this is stylesheet_header_menu.css


@media (max-width: 767px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


replace it with

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}






find amd replace this style and include media query

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


and find this class and add media query like shown below


@media (min-width: 992px) {

#mega-container ul.mega-menu {
float: left;
background: rgb(1, 19, 82));
background: -moz-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(1, 19, 82))), to(rgb(31, 120, 182)));
background: -webkit-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -ms-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -o-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: linear-gradient(rgb(1, 19, 82)),rgb(31, 120, 182));
list-style:
none;
display: none;
}

Quote:

---

Originally Posted by chadlly2003

To get the hamburger menu to display on tabet

You need to find this is stylesheet_header_menu.css


@media (max-width: 767px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


replace it with

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}






find amd replace this style and include media query

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


and find this class and add media query like shown below


@media (min-width: 992px) {

#mega-container ul.mega-menu {
float: left;
background: rgb(1, 19, 82));
background: -moz-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(1, 19, 82))), to(rgb(31, 120, 182)));
background: -webkit-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -ms-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -o-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: linear-gradient(rgb(1, 19, 82)),rgb(31, 120, 182));
list-style:
none;
display: none;
}

---

There is no code or query in stylesheet_header_menu.css file.

Quote:

---

Originally Posted by chadlly2003

To get the hamburger menu to display on tabet

You need to find this is stylesheet_header_menu.css


@media (max-width: 767px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


replace it with

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}






find amd replace this style and include media query

@media (max-width: 992px) {
#menuContainer {
float: none;
border:
none;
box-shadow: none;
display: block;
margin:
0;
width: 100%;
height: 50px;
}
}


and find this class and add media query like shown below


@media (min-width: 992px) {

#mega-container ul.mega-menu {
float: left;
background: rgb(1, 19, 82));
background: -moz-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(1, 19, 82))), to(rgb(31, 120, 182)));
background: -webkit-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -ms-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: -o-linear-gradient(top,rgb(1, 19, 82)),rgb(31, 120, 182));
background: linear-gradient(rgb(1, 19, 82)),rgb(31, 120, 182));
list-style:
none;
display: none;
}

---

There is no such code in that file for the iPad/Tablet reponsive.

Anyone have any suggestions?

How can I make the new product module images full size in the mobile and tablet version.

to make new product images larger

path: stylsheet

Find this - should be line 66
.centerBoxContentsNew img, .centerBoxContentsFeatured img, .centerBoxContentsSpecials img
margin: 5px 0px 5px 0px;

replace with
.centerBoxContentsNew img, .centerBoxContentsFeatured img, .centerBoxContentsSpecials img
margin: 5px 0px 5px 0px;
width:100%;

**Note if you don't want to edit the featured and contents special than just create the style as it own like this for the new product module
.centerBoxContentsNew img {
with:100%
}

Quote:

---

Originally Posted by chadlly2003

to make new product images larger

path: stylsheet

Find this - should be line 66
.centerBoxContentsNew img, .centerBoxContentsFeatured img, .centerBoxContentsSpecials img
margin: 5px 0px 5px 0px;

replace with
.centerBoxContentsNew img, .centerBoxContentsFeatured img, .centerBoxContentsSpecials img
margin: 5px 0px 5px 0px;
width:100%;

**Note if you don't want to edit the featured and contents special than just create the style as it own like this for the new product module
.centerBoxContentsNew img {
with:100%
}

---

That did it, thank you.

I believe we spoke about this here
https://www.zen-cart.com/showthread....uorspar/page21