[Solved] Website div width 100% not working on mobile

[Lucio]

Hello all,
probably you could reply that this issue has been discussed before, but really i don’t understand how I could fix on my website.

So I want to thank you in advance.

My issue is on my website: http://www.motherkumesh.com
On a desktop browser (Google Chrome) it is working fine, but on mobile browser (Chrome again), the slides (gray and white) seem to have a width inherited from the device.

How could I fix?
PS:I’m a fresh html & CSS learner.
Thank you guys.

Lucio

[Senff]

You have this in your code, applied to the top menu, which will override the 100% width:

.fixedwidth {
    width: 1050px;
    margin: 0 auto;
}

[Lucio]

Thanks Senff,
yes, but if you try to open it on a mobile browser, the width seems to be 1/3 of that. There are 2 gray slides, and both are less than the specified size (on mobile). I mean the background color.

[Senff]

How about this? That seems to widen the whole thing too.

.fixedwidthslide {
    width: 1050px;
    height: 1000px;
    margin: 0 auto;
}

[Lucio]

The first is for the header menu.
The second is for the slides.

I would see on my mobile the entire page, and not the half-gray slides.

[Lucio]

https://db.tt/Tdnm30A5

[Senff]

Right. But keep in mind, that 100% width (with no parent) equals the width of your browser window. So while your panels are set to 1050 pixels, “100%” will only be as wide as your browser (or device).

.grayslide is set to 100%, so that will only be as wide as your browser. But inside, there’s an element that is 1050 pixels, so its much larger than your slide and will “escape” the grey background area.

You could try changing this tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To:

<meta name="viewport" content="width=1050, initial-scale=1.0">

…but I’m not sure if that’ll help.

[Lucio]

Hi Sennff,
thank you but I have still the same issue. Any other idea?

[Paulie_D]

To start with…anywhere you have this

width: 1050px;

try changing it to

max-width: 1050px;

Fixed widths are not responsive.

[Lucio]

But I am not looking for a responsive website.
I would like to view the page on the mobile without zoom.
At 100% of this 1050px. And after maybe I could zoom in to see better the contents.

Thank you.

[Paulie_D]

Wait, you want the whole page to scale down to fit any mobile device but still be full width…then you have to remove the fixed pixel widths.

Otherwise, you would get vertical & horizontal scrollbars.

[Senff]

You didn’t change the viewport width. It’s still set to device-width so that won’t help.

Dirty workaround — add this to your code:

body {
  min-width:1050px;
}

[Lucio]

Ok guys, I’ve solved my issue deleting the “viewport meta name”.
I’ve also setted the “body min-width” at 1050px and now it’s working.

Thank you all.

ps:Feel free to download the albums if you like our music.
Cheers.

[SwiftBud.com]

I have also stuck in the same problem and got a very simple solution for this, Just you need to download a tiny plugin if you’re using wordpress then you are done.

Here is the link: https://wordpress.org/plugins/definitely-allow-mobile-zooming/

Hope I havn’t spammed or break any rule by posting this.

Thanks & Regards.

[ayusman33]

Hi,

We have implemented an application and it runs well in desktops. But when opened in iPad; the actual width of the application is 948PX but it occupies the entire 1024PX of the iPad screen. Basically the page is stretching or zooming automatically. I tired using all the various viewport meta tags but it does not help. Now I am scaling the application based on the media queries. basically the application is zooming when opened in iPad at any landscape or portrait view. The application works well when I try to render in Chrome using iPad. But we are using a browser called DoCan and it only happens in DoCan browser. Please note that Docan browser belongs the webkit family.

Has any experienced similar issue and was able to fix?

I want to fix the actual issue rather than using the scaling.

Any help would be highly appreciated.

Thank you.

Regards,
Ayusman

[Author]

Posts