My website is hosted on blogger.com but I uploaded a completely custom theme and have adjusted the code to change the design a bit. The theme is mobile friendly except that my actual blog posts text is only showing half the page on mobile devices. It's as if the page is cut in half so half the sentence isn't showing. Even if you attempt to zoom out. Its just showing the desktop view on mobile without scaling so only half is visible. Everything else works perfect on the mobile website. I'm lost with how to fix this...thinking of adding meta tags to the head for each mobile device? I tried to add
<meta name="viewport" content="width=device-width, initial-scale=1">
but it didn't work. Basically, I need to change it so it automatically scales blog posts for different mobile devices.
CSS for my blog post font and page width has been specified
#test{
width: 680px;
margin: 0 auto;
text-align: left;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.01em;
}
HTML
<div id="test">BLOG TEXT</div>`
Wondering if there is an easier solution?
Cheers,
Here's one thing you can try:
#test {
width: 680px; /* your main container */
margin: 0 auto; /* centering it */
max-width: 100%; /* don't let the container be bigger than the body! */
/* ... the rest of your css... */
}
That way, if the viewport is smaller than 680px (most cell phones are), your content won't overflow. If that doesn't work, you might consider posting a link to your blog here so we can see the full context of what's going on.
Related
I am building a site with a simple topbar that needs to fill the entire width of the browser window. What I have now works perfectly on desktop browsers, Android, any iPhone in portrait orientation, and older iPhones in landscape view. On iOS 16 though, in landscape mode it persists in leaving a gap at the edges of the window.
illustration of the problem
The page structure is real simple, there's a single #page_wrapper_div with everything else nested inside.
html {
all: unset;
position:relative;
}
body {
margin: 0;
padding: 0;
min-width: 320px;
}
#page_wrapper_div {
min-width: 320px;
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
}
#topBar {
display: block;
position: relative;
}
I found a couple of posts from people who had what sounded like similar problems, which suggested I needed a viewport meta tag:
I have tried several variations of this, with and without an initial-scale=1.0 added in, and none of it makes any difference. It works correctly (i.e. the margins stretch to the edge of the window) in responsive design mode and on my own iPhone, I can only reproduce it on a physical iPhone running iOS 16, or in a hosted instance like BrowserStacks, so it's difficult to troubleshoot. Any suggestions?
I am doing a quick mobile version of my desktop site in bootstrap and running into some formatting issues. When I expand this view on my desktop, my icons show in a 3 by 4 grid just fine. When I narrow does the width of the window, the grid of images acts accordingly and narrows down to 1 column with all 12 images per row, with no horizontal side bar.
However, when I am viewing this on mobile, my my nav bar does not 'snap' to the width of the visible resolution per say and allows me to side scroll - even though the images are still aligned in 1 column of 12 images. The navigation acts as if it is being viewed on desktop and not on mobile despite the site clearly detecting that it is being viewed on mobile. It might be hard to replicated this in a fiddle without seeing this on mobile, but i included the fiddle to see if anyone can tell what I am talking about.
/*******GENERAL********/
*{
box-sizing: border-box;
margin: 0;
zoom: 1;
font-size: 13px;
}
body{
background: #f9f9f9 url(../img/crossword.png) repeat top left;
font-family: 'Open Sans', Tahoma, sans-serif;
max-width: 100%;
background-color: #5F5E5E;
font-size: 13px;
color: #333;
overflow-x:hidden;
}
Sorry I had to include code in the post to include fiddle, but the entire index and CSS are there. I added this to show that I hide x overflow in hopes that would rid mobile x-scrolling just like it did for desktop x-scrolling.
Fiddle here:
http://jsfiddle.net/09wfonqv/5/
Again, it looks fine on desktop - but when opened in mobile, this demo allows for horizontal scrolling throughout and doesn't show the images in a single column with the dropdown menu visible in only the display like I would like.
Thanks!
You need <meta name="viewport" content="width=device-width, initial-scale=1">
Here is a guide on viewports for mobile devices Using the viewport meta tag to control layout on mobile browsers
You haven't set your viewport in the head. - that's a critical error!
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head.
You also need to look into media queries.
Add #media screen and (max-width:480px) {your styles} and same for 768px to your css. (ipad) start there.
I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/
You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.
When my main widthfix div for my 960px wide centred site is brought into HTML5 Boilerplate it misbehaves on iPhone. In Safari on the iPhone the div extends off screen on iPhone. It works fine on my laptop screen browsers & everywhere outside of HTML5 Boilerplate.
I haven't changed anything inside HTML5 Boilerplate yet apart from add a widthfix div with the following class:
#widthfix {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}
...I've just worked it out it can be corrected by removing:
meta name="viewport" content="width=device-width, initial-scale=1.0"
from the head.
I don't know if this is the best solution, so if anyone has any additional input I'm all ears.
However at least it appears to display OK.
I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:
http://ellenflaherty.com/projects/carland/
Any idea why the discrepancy?
Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.
I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.
I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.
.projectimg {
bottom: 0;
/* display: inline-block; REMOVE THIS */
/* float: left; /* REMOVE THIS */
height: auto;
margin-left: 220px;
margin-right: 30px;
overflow: hidden;
width: 80%; /* THIS */
}
Hope that helps
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of HTML. It will help to adjust page size according to screen size.