(SOLVED)Mobile layout is small how to resize it bigger?

[MrWade]

Yes, I have a iPhone 13 Pro Max I noticed that the menu/navigation bar is to small to read and the product listings is also to small to read. How can I resize it to make it readable better?

Wade

Edited January 20 by MrWade (see edit history)

[Ewonta]

To enlarge the menu icon

themes/classic/assets/css/custom.css 

Add css

#header .header-nav #menu-icon .material-icons {
   font-size: 2rem;
}

In order to make products in two columns on a mobile device, add the col-xs-6 class in the file
 

themes/classic/templates/catalog/listing/product-list.tpl
Line: 60

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-sm-6 col-xl-4"}

 

The same is in the module on the main page.

modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

 

[MrWade]

I am sorry, that didn't help. My logo is still small and the shopping cart icon is still small etc. I don't want to do a two column on the mobile. I said how can I make the product listing bigger where it can be more readable?

[MrWade]

Anyone can help me in this area?

[calgaryx]

18 hours ago, MrWade said:

Anyone can help me in this area?

What's your website address?

I had a same issue. 

[MrWade]

2 minutes ago, calgaryx said:

What's your website address?

I had a same issue. 

https://www.galaxyhomedecor.us

[calgaryx]

3 hours ago, MrWade said:

https://www.galaxyhomedecor.us

Install this free module. Free Classydevs Prestashop Custom CSS & JS – ClassyDevs

Add this custom css.

#header .logo {
    max-width: 13.75rem; (
    height: auto;
}

#header .header-top {
    padding: .25rem 0;
}

@media (max-width: 989px) {
    #header .top-logo img {
        max-height: 2.7rem;
    }

#header .header-nav #menu-icon .material-icons {
    font-size: 4rem;
}
}

You can resize logo. Just adjust image size you like it.

Clear cache.

Let me know if that work for you.

 

[MrWade]

3 hours ago, calgaryx said:

Install this free module. Free Classydevs Prestashop Custom CSS & JS – ClassyDevs

Add this custom css.

#header .logo {
    max-width: 13.75rem; (
    height: auto;
}

#header .header-top {
    padding: .25rem 0;
}

@media (max-width: 989px) {
    #header .top-logo img {
        max-height: 2.7rem;
    }

#header .header-nav #menu-icon .material-icons {
    font-size: 4rem;
}
}

You can resize logo. Just adjust image size you like it.

Clear cache.

Let me know if that work for you.

 

Ok, it made the hamburger menu and the logo a little bigger. Not the shopping cart icon and the login icon same size small.

[calgaryx]

11 hours ago, MrWade said:

Ok, it made the hamburger menu and the logo a little bigger. Not the shopping cart icon and the login icon same size small.

.right-nav a { font-size: 24px !important; } .material-icons { font-size: 30px; }

#header .header-nav .blockcart { height: 24px; font-size: 24px; }

#header . hidden-sm-down { font-size: 24px !important; }

Try this css code. 

You can resize fonts.

 

[MrWade]

Ok, my logo is overlapping the menu. Is there a way I can position the menu more to the right. Also, how can I change the height of the header to make it bigger?

[calgaryx]

31 minutes ago, MrWade said:

Ok, my logo is overlapping the menu. Is there a way I can position the menu more to the right. Also, how can I change the height of the header to make it bigger?

You can try with code.

#header .header-top .menu {
    padding-left: 95px;
}

But container in this template is to small to put everything in one line.

Or you can try to move search to different block. DisplayNav1 or DisplayNav2.

[calgaryx]

Or you can increase container to 1400px

.container {

width: 1400px;

}

[MrWade]

Got the menu the way I want it. Now, I have some issues with product list width. How to get the product list full width of the screen for mobile. I don't want a 2 column. Also the my main block isn't showing full width for mobile. Can you help me in that area?

[calgaryx]

49 minutes ago, MrWade said:

Got the menu the way I want it. Now, I have some issues with product list width. How to get the product list full width of the screen for mobile. I don't want a 2 column. Also the my main block isn't showing full width for mobile. Can you help me in that area?

Try this code

.product-miniature .thumbnail-container .product-thumbnail img {
       width: 400px !important;
}

[MrWade]

42 minutes ago, calgaryx said:

Try this code

.product-miniature .thumbnail-container .product-thumbnail img {
       width: 400px !important;
}

How to make the product title and the price bold and bigger also?

How to make the block text on the main page like as the the product listing?

[calgaryx]

3 minutes ago, MrWade said:

How to make the product title and the price bold and bigger also?

How to make the block text on the main page like as the the product listing?

Try this

.product-miniature .product-title a {
    font-size: 20px;
   
}

.product-miniature .product-price-and-shipping {
   
    font-size: 20px;
}

[MrWade]

Ok, I got the products list the way I want it. Now, this is the text block on the main page of the website. The images isn't showing full width. How do I fix that part?

 

[calgaryx]

2 minutes ago, MrWade said:

Ok, I got the products list the way I want it. Now, this is the text block on the main page of the website. The images isn't showing full width. How do I fix that part?

 

Try this

#custom-text img {

width: 400px;

margin-top: 10px;

}

[MrWade]

4 minutes ago, calgaryx said:

Try this

#custom-text img {

width: 400px;

margin-top: 10px;

}

Ok, I try that no change.

[calgaryx]

5 minutes ago, MrWade said:

Ok, I try that no change.

 

[MrWade]

4 minutes ago, calgaryx said:

 

Ok, what am I missing here. I am looking on my iPhone 13 Pro Max and its still not showing full width of the screen.

[MrWade]

Is there anyone else might able to help me in this area?

 

[calgaryx]

21 hours ago, MrWade said:

Ok, what am I missing here. I am looking on my iPhone 13 Pro Max and its still not showing full width of the screen.

Try this code

#custom-text {
    padding: 0px;
    }

#custom-text img {
    
    width: 600px;
}

It should work. 

[MrWade]

6 minutes ago, calgaryx said:

Try this code

#custom-text {
    padding: 0px;
    }

#custom-text img {
    
    width: 600px;
}

It should work. 

Thank you, that did it!

[MrWade]

Ok, I got another issue. Now it showing one column on the main page for the desktop version when I change the code for the mobile version. This is the on the main page.

Edited January 19 by MrWade (see edit history)

[MrWade]

Ok, I am having issues with layout on the Tablet/iPad it looks like a full desktop version. How can I fix this. The Desktop version is fine.