I have a .body element on my page http://crimeansurfers.tumblr.com which has a border frame that should touch the edges of the screen.
body {
font-family: 'Arquitecta', sans-serif;
font-size: 13px;
color: ;
border: #00f 10px solid;
background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
It shows up fine on desktop (the frame touches the edges of the screen, however, when I open it on a mobile, it shows like this:
As you can see, the right frame is not touching the edge of the screen, but it's supposed to.
I'm using also viewport to resize display for mobile devices with the following parameters:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
What do I need to change in order for it to work as I intended it to?
Thank you!
UPD maybe it makes sense to render the frame using some other method rather than body CSS tag?
There is an overflow being caused by the ul element within the #thumbs div.
You can fix this by adding a media query to the bottom of your style sheet.
<style>
#media (max-width: 414px) {
#thumbs ul {
padding-left: 0;
}
}
</style>
In this case I've set a max width of the media query to 414px as the problem only shows on screen sizes smaller than iPhone 6+.
Related
I have an image that used to display ok, screenshot of small image, but now it is making itself very tiny when before it used to fill the mobile screen. This is the CSS:
img {
max-width: 100%; height: auto; text-align: center; box-shadow: 2px 2px 5px 1px #888;
}
a img {
list-style-type: none; text-align: center;
}
The image itself has a width of 320px so you would think it would fit but it is very tiny, here i a screenshot. the map image is the one that is tiny, the other is OK
Can anyone tell me what I have done wrong?
Set the HTML viewport to fix this issue. This instructs mobile devices to use certain scaling methods, making the images appear in the correct size.
<head>
<!-- Other head elements here -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I'm using a bootstrap template and getting paragraph overlap only on smartphone (iPhone 6, Safari). Works fine on browser even while shrinking the browser window to minimum size to test. Overlap occurs after 2 lines on phone.
There is no max height in the css. This is the css for paragraph:
.about-grid p {
padding:0 0 0.5em 0;
color: #333;
font-size: 1.1em;
line-height: 1.4em;
font-family: 'Arimo', sans-serif;
}
You can also see the full web page online.
It´s quite simple to fix:
on line 1279 of style.css you have a breakpoint declared
#media (max-width: 320px)
and on line 1391 you have this class:
.about-grid p {
height: 50px;
font-size: 1em;
}
The height is forcing your text blocks to be only 50px high, and since you don't have an "overflow: hidden;" the text overflows and ends up overlapping on everything else. it also happens if you make your browser window really small, not just on smartphones.
All you have to do is remove that height declaration. If you need it for some reason just add a new class and make it more specific.
Hope it helps :)
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.
I had designed a website : http://newyorkfairandlovely.com/ and it is responsive. But when the site is opened on a computer then the Background color of Navigation Bar is not displaying on the whole screen. The full size of the image is 1950px wide.
When the screen is reduced to 1024px or smaller then it is OK.
This is the css code:
nav {
position: absolute;
left: 0;
background-color: #9362ae;
float: left;
width: 100%;
margin: 0 auto;
max-width: 1950px;
font-family: "Source Sans Pro", Helvetica, sans-serif;
}
Check your brackets. The rule you posted is nested under this:
#media
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px) {
/* your rule is here */
}
So once the screen size increased to greater than 1224px, your rules are no longer applied.
This is an example of why it's a good idea to properly indent your code.
This should help:
body { margin : 0; padding : 0; }
Body has its own spacing from the HTML. Different browsers have different settings, but most have some space between the edges of the <html> and the <body>,
and typically using body { margin : __; }
What is the height/width of its parent elements? I believe you could make it cover the whole screen if the parents are all 100%. Also, try setting the margin-right to 0. (I also noticed you have a float:left; in your css, that might be part of the issue.
I have a simple page that has a wrapper with a background color on it. When I scale the browser in to a small size the wrapper pops out of position. Its like 20px at the left was added.
Also when you scale the browser in small the input fields drop down to the next line. How can I stop that.
http://www.artaholic.com/push/bc/acc.html
Remove the:
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"/>
if you not really need it. It'll solve the jump.
The 20px from bootstrap responsive , this line I believe:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}