I have website in wordpress and I have a small problem with content. On computers main content shows fine. As you can see on mobile device, content has approx. 50% of width and I don't know why.. Can anybody help me please?
Website:
http://www.djreneek.com
Mobile screenshot:
https://dl.dropboxusercontent.com/u/19898988/Screenshot_2013-07-31-21-41-18.png
Thank you very much
EDIT: now I see diacritics doesn't work on mobile devices too... (ščťžýá etc..)
Ensure you have set a viewport within the <head> of your document catering for mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The issue is with your wrapper on the website. If you look at the screenshot, there is a horizontal line that extends past the actual content, which means your wrapper or container is too big. Try using max-width: n px; on your wrapper. If that doesn't work try media queries.
For example in your css:
#media screen and (max-width: 600px) {
#wrapper {width: n px;}
}
It says that if the width of the screen is >= 600px, update these styles.
This would go underneath your styling for the wrapper. If you do go this route, you'll want to implement what Vector answered with the additional meta tag. It basically tells the document that there are media queries.
Related
I've used Chrome DevTools to resize the viewport to 480px wide, as shown below.
I'm using bootstrap's grid layout, so I have a div.container that I'm using, as shown in the bottom left. When I hover over it, I see chrome has that particular div marked as width 750px (and the whole body is 980px), even though I clearly have the screen set at a smaller resolution. Even the ruler at the top shows it is 480px wide.
For further confirmation, you can see the media query that says the width of 750px should only be set at higher resolutions (min 768px), so the viewport is assuming it's a higher width than it is.
Am I mis-understanding how the responsive feature is used?
Thanks!
For accepting answer
As stated in comments: you are missing meta tag with viewport that is required for media-queries to take effect.
As answered above, adding a metatag in html header will resolve the issue.
Below is the viewport element, which should be included in all your web pages
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Im trying to open up my latest site design on my phone and have it match the screen when i go to the url. However, it always open up much bigger and I have to double tap the screen to resize it to the correct size.
I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1">
But nothing is working. Please view source on my site and html at:
http://directsellers.org/NeverTakeNo4Answer/LetsGo.html
and tell me what I need to fix. Thanks.
I faced the problem like you did.
So you have to set your html and body width, not in pecentage or pixels, but in vw (viewport width). For example:
body, html {
width: 100vw;
min-width: 100vw;
max-width: 100vw;
overflow-x: hidden
overflow-y: auto
}
I did this way, and it works.
You are missing the CSS for the Responsive Design. You need to target the device width using media queries and write CSS for mobile and tablets.
Please follow the link below to get an idea about it.
http://www.zell-weekeat.com/how-to-write-mobile-first-css
You give fixed Width. just give width:100%. to all div and content. it will automatically responsive
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.
It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.
Here are my meta tags
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
Here are some pictures since I'm not overly sure I'm being clear.
Vertical Orientation:
http://imgur.com/guJIG5k
Horizontal Orientation:
http://imgur.com/SNwvPFD
The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S
Make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1">
to your <head>.
Fit the size of browser like a Galaxy S3 horizontal, it looks good?
Winnyboy5's solution probably worked for you because you were not using the grid properly, but note that it's hard coding the size and if using a bigger screen, it won't adjust accordingly to take the space available, defeating the purpose of bootstrap.
To make the viewport work as it's supposed to on mobiles, you have to make sure you have the needed the container div wrapping everything:
<div class="container">
Your other elements go in here
</div>
OR:
<div class="container-fluid">
Elements here
</div>
The only difference with "fluid" container is that it will take the entire space.
Then adding this to your head will work on mobiles:
<meta name="viewport" content="width=device-width, initial-scale=1">
The inner elements of the grid may have a fixed width more than the mobile screen size.
Check the CSS of the elements to find the one with the overflowing width.
You can use media queries to fix the width issue. Like below
#media (max-width: 320px) {
.element {
width: 90%;
}
}
I faced the same issue.
I had the container width in the css as;
.container{
width:640px
}
Changing width to max-width worked for me.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />