Skip to main content

Forums

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

This topic contains 14 replies, has 5 voices, and was last updated by  ayusman33 2 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #194202

    Lucio
    Participant

    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

    #194204

    Senff
    Participant

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

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

    Lucio
    Participant

    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.

    #194206

    Senff
    Participant

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

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

    Lucio
    Participant

    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.

    #194208

    Lucio
    Participant
    #194211

    Senff
    Participant

    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.

    #194234

    Lucio
    Participant

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

    #194242

    Paulie_D
    Moderator

    To start with…anywhere you have this

    width: 1050px;
    

    try changing it to

    max-width: 1050px;
    

    Fixed widths are not responsive.

    #194253

    Lucio
    Participant

    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.

    #194256

    Paulie_D
    Moderator

    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.

    #194257

    Senff
    Participant

    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;
    }
    
    #194258

    Lucio
    Participant

    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.

    #269593

    SwiftBud.com
    Participant

    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.

    #287707

    ayusman33
    Participant

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star