I'm using bootstrap grids for my layout. When I make the width of my browser smaller the grid elements rearrange to accommodate. However if I view the site on my phone, or set the browser view mode to mobile device in developer options on chrome, the grid elements don't move, everything stays put but reduces in size, so I end up with a really tiny version of my site.
for my grids im using:
<div class='row'>
<div class='col-md'>content</div>
<div class='col-md'>content</div>
</div>
Am I using the -md part incorrectly. I like the the point at which it breaks on the browser but does this affect mobile as well?
edit: Just to add some peculiarities about my site.
It's hosted on Github, ie. MyName.github.io
Issue only occurs with the online version, offline the grids rearrange fine.
Im using a domain to forward to my github address, ie. Myname.com -> myname.github.io
Just incase this can affect anything
That sounds as if you didn't insert the viewport tag, so mobile devices will zoom your website to fit into the screen as is. Put this into the headsection of your html code:
<meta name="viewport" content="width=device-width initial-scale=1.0" />
Found the issue.
I am using a forward on my domain with masking to another address. This displays the site in an iframe in the original domain domain.
If i visit the domain i'm directing to directly, everything works dandy.
Related
I hosted a website (ninacressoni.com) and on my brackets, where I edit my website, is fully responsive. But while online, the responsiveness of the mobile disappears.
See, when I just minimize the screen on pc (brackets or website), it responds the way I want. But when I go on inspect ON the website, the mobile screen view is gone. And that is how it looks when I enter my site on a cellphone.
On brackets, even if I open inspect, this responsiveness continues. But on the site itself, it doesn't.
Can someone inspect my code and help me with this situation??? This has been very frustrating since I can't seem to find an answer.
I use Hostgator and they use Cpanel.
Could this be an error at their host services or could it be programming related?
Ps: Already talked to them and their primary guess is that is a problem with the programming (It seems it isn't because on my brackets the website works and online it works only if you just screen size it without inspect, with inspect nothing happens the way it should on mobile screen and that's how my website appears on a mobile) and in order to get a more advanced help I would need to pay extra.
(Tried explaining with details)
Can someone help this girl out? DESPERATE!!!
Your site is missing an important meta tag
<meta name="viewport" content="width=device-width">
More on responsive meta tag here - https://css-tricks.com/snippets/html/responsive-meta-tag/
Once this is added, this is what I see on my browser with Inspect Element active
Since your question lacked any sort of explanation on how the site should look on mobile device, I assume this is what you want the site to look after all.
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
I'm working on a responsive design using Google Apps Scripting and have run into some issues. All site contents are piped through an iFrame sandbox that prevents me from setting up a meta viewport. This means that no matter what device I view the application on, it's treated as a desktop application.
For example, viewing the web app on a Galaxy S4 shows the full 1080x1920 view.
Google creates the sandbox iframe and sets it to the resolution of the device. They don't let you create a meta element and creating it via JavaScript won't do you any good as you can't modify contents outside of the sandbox. Once the page has loaded, you can scale the window and the elements will resize as expected, but this does me no good on a mobile device.
The best I can come up with is to retrieve navigator.userAgent after the page has loaded and then modify each element after the fact. Far from ideal.
So, is there a way to trick Bootstrap into rendering mobile or am I stuck writing media queries and custom CSS?
I had a similar problem (within a modal, not iframe) so created a pretty lengthy but basic css page to solve it:
https://github.com/shawntaylor/bootstrap-force-device
Once you add that css file to your project, you call force-xs (or force-sm, force-md or force-lg) on a parent div of the content you want to force. Then the CSS forces the inner content to behave like it's on an xs device.
<span class="force-sm">
<div class="col-sm-6 col-md-4">
<h1>I want to make this behave like it's on an sm device</h1>
<h2>Even when it's on a desktop</h2>
<p>Or within a window that thinks it's a desktop</p>
</div>
</span>
I don't have the link handy, but I literally just read about this:
You can download a version of Bootstrap CSS that only includes the mobile media queries, and delete the media query so that the mobile CSS loads on all devices.
I have successfully tested the responsive design of my website on an iPhone locally but when I deploy it the responsive design :
works when resizing my browser's size on my desktop
do not work on my iphone
When I say it works I mean I can see it toggles the Bootstrap navigation bar for small devices, uses my custom css media queries, etc.
I have these meta in my html :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The answers I have come across mention the meta tag but it is already present on my site (I used the HTML5 Boilerplate starter). Any other ideas ?
I finally found the issue... Not at all related to my code but to the redirection from my domain name to my hosted page. My provider was using a html wrapper that basically obliterated my HTML tags (and consequently my <meta> tags). What I did was just looking at the HTML and figuring something weird was happenning... I stopped using their odd web redirection and started configuring my DNS right. Everything is working fine now.
One thing you could look for are css media queries which might specifically target iPhones or smartphones and stop them displaying a responsive behaviour, while leaving desktop browsers unutouched.
For example comment out or re-inspect any css media queries that target (min-device-width : x) or (max-device-width: y)
Alternatively, post a URL so we can inspect the css
Good luck
What special meta tags, CSS, etc. do I need to take into consideration when making my website ready to look and function right in Safari Mobile.
I didn't take much consideration to Safari Mobile until I got an iPad. I noticed that the sites I create do not always re-size correctly, look well formatted, etc. Nothing major as I am largely a front end developer.
I searched through StackOverflow and have not found a real specific outline of Safari-Mobile considerations
I am assuming that your site is already designed in a fluid manner. One of the big things for me was this:
<meta name="viewport" content="width=device-width" />
This sets the size of the viewport so when orientation changes it resizes the viewport which allows your design to reflow to the new viewport size.