I hope it's ok to share URL: http://www.amigote.com/user/marcus_avrelius
The header image gets resized on PC browsers but for some reason doesn't work on cell phones, shows way too high! I am not sure why please help me to find it issue?
Update! It's not working on default browser? How can I take care of that? I installed firefox app and it works!
Use 100% width so it will automatic re-sized according to browser width.
OR
You can use media query for same.
Related
The post feature image is using as background of the slider, It is dynamic which come form "Image from Stream if exist". IN desktop device it is fine but it is not showing correctly in tablet and mobile devices. I wan to to show the feature image 100% full width in tablet and mobile devices. I have tried a few way to fix it but still there is problem. Can anyone tell me how to fix that?
As the normal method is not work to fix this problem
Then I took a text layer and set custom meta filed for the post feature Image but I think I didn't implement it well. I want to know the way so that I make my post feature image 100% full width in mobile devixes. Thanks
I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox.
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before?
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance.
In your media queries, you used min-device-width and max-device-width: The device width measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way.
I would rather use min-width and max-width instead of min-device-width and max-device-width
I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.
So i am making a website, and its done exept that window sizing is not very optimized yet.
I have been using media query for css3 but its not working on all browsers
So im asking, can i do anything with my CSS that makes everything stay at the same size if someone resizes or are using a different resolution?
Here is my code:
http://pastebin.com/Z4EKAdVj
website:
http://www.hyperqube-game.tk
Thanks!
check mediaqueries.js for IE5+, its working fine, you just have to paste script in site.
https://code.google.com/p/css3-mediaqueries-js/
Then for example IE7 is rendering correct page size to resolution
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.