I am having some problems with the responsive design of a landing I did. The responsive design works well on mobile and desktop, but when I activate de desktop mode on a mobile browser It just breaks. I really do not know Why this is happennig.
here is the link of the
landing page
Related
I have designed a single page website, the responsiveness of the website is working fine in my localhost but after i have uploaded it to the github and host it, the website is not responsive in mobile device.
Here is my github repo link https://github.com/spideyhere/portfolio.git
and my live website link is http://mohdwasim.com/
I have attached the screenshot of mobile preview in my browser, which is totally fine but the same is not responsive in the mobile.
Mobile Screenshot
Have anyone tried forcing desktop view to display on mobile devices (when one clicks the view desktop version on their browsers)?
I was thinking if it is possible to maintain normal mobile view for mobile and then force desktop view when the view desktop version is selected on mobile devices...
The 'View Desktop Version' button present in google chrome browsers works this way:
It changes the User-Agent header in the request to match those
sent by the desktop browsers.
It ignores the original viewport meta tag and applies the default
"min-width: 980px;" media query to the css thus putting the responsive
pages into their desktop layout.
So if your website is responsive then there is no need to do any extra work. It will automatically switch to the desktop layout when forced through 'View Desktop Version'.
I have a problem with a Website that I am building:
The design works perfectly on any device, especially on tablets and smartphones. It also works perfectly in Chrome Developer Tools -devices simulator.
However, when I reduce the size of the screen in a desktop to a similar size of a tablet or smartphone the design looks broken. The text is not respecting the z-index and it is visible over the active menu.
What could be the problem? Does anybody have the same problem?
use class of bootstrap for multiple layout
If u use mobile use class of class="col-sm-12" etc.
If you reload the page after you resize it on a desktop screen, is the design still broken?
I am puzzled. I created a website for a friend which you can view here opelversnellingsbak.be
The problem is that when I use chrome responsive view the website looks good and responsive on all devices.
However when I go to it with safari on an iphone. The website is not responsive anymore.
My media query is as follows:
#media (max-width:767px) {
help would be much appreciated
Your web opelversnellingsbak.be have a frame to http://cds.one, on opelversnellingsbak.be there is no responsive css. That why it no responsive.
Your website http://cds.one is responsive good on Safari and Chrome on Iphone 6s+.
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp