I have a webpage as linked:
Click Here
Everything is fine on PC or MAC. The issue is if you look at it on a mobile devices, you will find that the 3 images caused a horizontal scroll bar.
I use this to set the viewport for mobile device consideration:
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">
I use a sprite method to set the div background, for showing the 3 images.
HTML:
<div class="demopic" id="category"></div>
CSS:
.demopic {
text-align: center;
margin: 10px auto;
background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png);
}
#category {
width: 560px;
height: 590px;
}
My question is, based on my situation, is there a quick fix to achieve a responsive image? I don't want to show the horizontal scroll bar on mobile devices.
If I delete initial-scale=1.0 in <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">, the image will be compressed for a proper size, but at the same time, the font-size will be resized as well.
Anyone give me some inspiration will be highly appreciated!
I think you're best bet is to use the standard img tag and make sure the image never expands wider than it's parent container (could just be the body element).
.my-image {
max-width:100%;
height:auto;
}
This should do the trick.
However, if you really want to use the div / background image approach things are slightly more complex.
.my-background-image {
width:100%;
height:0;
padding-bottom:50%;
background:url(img.png) no-repeat center center;
background-size:100% auto;
}
Here we set an element to fill it's parents width. Then we make it's height proportional to it's width using padding-bottom (you'll need to tweak this). Finally we make the background size always fill the element. Worth noting that background size won't work in IE8.
Related
I made a website for fun & testing but it doesn't look well on mobile as it works on desktop, especially images and specially positioned stuff got out of page. I tried
<meta name="viewport" content="width=device-width, initial-scale=1">
but it still looks a way that nobody wants to see.
I'm a newbie codder please forgive my flaws :)
website: http://ersinski.epizy.com/
<meta name="viewport" content="width=device-width, initial-scale=1">
in your css file:
img {
max-width: 100%
}
It's because you are centering things with left: 500px;. It's a fixed distance from the left side that will only look centered on a specific screen size. For example on a device with a screen width of 320px(mobile) all your 'centered' elements will start 500px from the left side even if that means going beyond the device screen.
For dynamic design look into flexbox.
And for your specific website:
Remove all the left: 500px; on 'centered' elements
Add display: flex; and flex-direction: column; to your body element
Add align-self: center; to anything you wanna center horizontally.
I've checked documentation on multiple sites, and they all agree that max-width should be overriding width in CSS. For some reason, though, it's always staying at 800px. This is my CSS:
.content{
width: 800px;
max-width: 100%;
}
This should be making it stay at 800px wide unless the window gets smaller, and then shrink it, right? I also tried the other way around:
.content{
width: 100%;
max-width: 800px;
}
This gives me the same result. It's always 800px, no matter what. I had thought of using min(), but it turns out that was removed from CSS (though why, I have no idea). Does anyone know what I'm doing wrong?
I should point out that I have included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my header. That has no effect.
You must know that the device-width maybe larger than 800px, if ti's larger than 800px, so your max-width:100%, will not work unless some other wider dom than 800px distract the wrapper.
If I have something like this:
.div {
width: 105vw;
}
It won't go past the browser window. Instead, it will just make the browser wider. Does the same thing when I use a media query with max-width of 475px and I set the width to 600px. How do I get it to go past the screen? I am trying to do this:
// Make the div go past the screen on both sides
.div {
position: relative;
width: 105vw;
left: -8px;
}
And that seems to work on desktop, but not mobile.
Edit:
Viewport:
<meta name="viewport" content="width=device-width, user-scalable=no">
The issue is that the iPhone browser is zooming out to fit the entire contents of the page by default. The solution is to replace the <meta> tag with one that sets the initial scale, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">
I had wide length table with using twitter-bootstrap.css.
The content was sticking out from the edge of the table so I added this line to bootstrap.css.
min-width: 400px;
bootstrap.css
body {
min-width: 400px;
padding-top: 60px;
padding-bottom: 40px;
background-color: #27292b;
background: url('/assets/body-bg.jpg');
}
But now, When my smart-phone loads the page, initial looks zoomed up as default.
How can I make it fit?
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With bootstrap, it is not straightforward to show tables with large amounts of content, especially on mobile devices.
First think about how much content is needed on a mobile device, and if still a problem, you can increase the size of the mobile viewport by reducing the initial-scale in the viewport meta tag as so:
<meta name="viewport" content="width=device-width, initial-scale=0.5">
This would double how much you could see - adjust the initial-scale value as appropriate.
Have a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive if you want to find out how to hide some of your <td> elements on mobile devices.