I am trying to centre an image on my website - and it looks great when loading the page on a desktop computer, however on the mobile phone browser it appears like this
The css i am using to centre the image is as follows;
#logo
{
max-width: 60%;
min-width: 300px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto
}
<header>
<img src="images/500x245.png" id="logo"</img>
<h1>Welcome to AppCloud</h1>
</header>
Can anyone suggest some alternative approaches as my way seems to be failing. Thanks
Decrease the min-width it will work perfectly
#logo{
max-width: 60%;
min-width: 300px; /** <<--- changes to be done here **/
height: auto;
display: block;
margin-left: auto;
margin-right: auto
}
Related
I am creating a simple wordpress theme for this website and style.css applied on this site.
i want all images to be responsive. I tried this code.
img {
max-width: 100%;
height: auto;
}
It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).
How do i fix this?
Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.
Instead of max-width: 100%; try the following:
img {
max-width: 200px; /* Change this to what your logo is by its width */
width: 100%;
height: auto;
}
You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.
EDIT: For sitewide images this of course does not work, since they all don't have the same width.
For image tag write this css
img {
max-width: 100%;
height: auto;
width:100%;
}
And if you are using bootstrap in your theme then write this css
img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}
You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
And the CSS:
.image-wrap {
max-width: 600px;
width: 30%;
margin: 2% 0 0 2%;
overflow: hidden;
position: relative;
display: inline;
float: left; }
img {
width: 100%;
height: auto; }
#media only screen and (max-width: 767px) {
.image-wrap {
width: 96%;
max-width: 400px;
display: block;
float: none;
margin: 0 auto;
margin-top: 2%;}
}
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I am not able to center the banner img. I want it to adjust size when the window size changes. (to keep it in proper proportions on tablets/smartphones)
The image max size is 918px but margin auto does not seems to work. Does anybody have any ideas what could be the problem?
Thanks in advance
original page: http://www.syntra-limburg.be/nieuws/nieuwe-gecertificeerde-opleidingen-2014-2015
<style type="text/css">
#banner img{
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>
<div class="container-12">
<div class="grid-12" id="banner"><img alt="" src="/sites/files/content/slides/20140616-gecertificeerde-opleidingen-2014.png" /></div>
</div>
Add display: block to img
#banner img
{
display: block;
}
The banner image is getting stretchable, it doesnt look good when in smaller screen size. Remove it from the inline styles.
And try this
#banner img{
width: 800px;
max-width: 100%;
display: block;
margin: 0 auto;
}
just try this
#banner { text-align: center; }
You have to set the width to 100% and it works.
You'll need:
img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
I have been coding using position: absolute and then using media query's to find different resolutions and adjust items on the screen to that resolution. After looking around people have said that its better to have a design that is fluid and adjust automatically.
I had an attempt yesterday on my login screen and I managed to get it working. On my next screen I think it is a bit more difficult as I have images that need to be scaled.
Here is my layout of my page:
.wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.bsimplex-header-bar {
margin-right: 10px;
margin-left: 10px;
width: 98.7%; /* 940 divided by 960 */
}
.content {
width: 98.7%;
margin-top: 38px;
margin-right: 10px;
float: right;
height: 79.5%;
margin-right: 10px;
}
.bsimplex-footer-bar {
width: 100%;
bottom: 0;
position: fixed;
margin-right: 10px;
background-color: #6a3d98;
margin-left: -10px;
}
Now I have 4 images that need to be in the middle of the screen side by side, would I wrap these 4 images in there own div or how can I achieve this scaling effect?
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
or use Bootstrap framework
I'm having some trouble with a responsive design. The first that I have tried to create.
For some reason when I view the site on my iphone everything is zoomed in.
What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.
Here is the URL: http://markpetherbridge.co.uk/peak.
I have added this into the html header:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
this is the relevant CSS:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
My desktop CSS is:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
and the CSS for the phone is:
#media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
It seems to work in the browser just not when viewed on an actual phone device.
This will work when #media screen takes effect.
http://jsfiddle.net/Enxu2/1/
You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.
In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%;
}
.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}
You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.
I hope this helps!