Images are small in mobile and tablet.

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