- This topic is empty.
-
AuthorPosts
-
January 25, 2015 at 1:31 pm #194202LucioParticipant
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
January 25, 2015 at 1:49 pm #194204SenffParticipantYou have this in your code, applied to the top menu, which will override the 100% width:
.fixedwidth { width: 1050px; margin: 0 auto; }
January 25, 2015 at 1:52 pm #194205LucioParticipantThanks 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.January 25, 2015 at 1:58 pm #194206SenffParticipantHow about this? That seems to widen the whole thing too.
.fixedwidthslide { width: 1050px; height: 1000px; margin: 0 auto; }
January 25, 2015 at 2:02 pm #194207LucioParticipantThe 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.
January 25, 2015 at 2:06 pm #194208LucioParticipantJanuary 25, 2015 at 2:17 pm #194211SenffParticipantRight. 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.
January 26, 2015 at 4:41 am #194234LucioParticipantHi Sennff,
thank you but I have still the same issue. Any other idea?January 26, 2015 at 5:11 am #194242Paulie_DMemberTo start with…anywhere you have this
width: 1050px;
try changing it to
max-width: 1050px;
Fixed widths are not responsive.
January 26, 2015 at 8:00 am #194253LucioParticipantBut 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.
January 26, 2015 at 8:28 am #194256Paulie_DMemberWait, 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.
January 26, 2015 at 9:25 am #194257SenffParticipantYou 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; }
January 26, 2015 at 9:37 am #194258LucioParticipantOk 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.April 8, 2018 at 5:37 am #269593SwiftBud.comParticipantI 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.
May 13, 2019 at 11:14 am #287707ayusman33ParticipantHi,
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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.