Images are small in mobile and tablet.

[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.

[wmorris]

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.

[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;
}

[wmorris]

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.

[wmorris]

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.

[wmorris]

Anyone have any suggestions?

[wmorris]

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