I have a website which uses an eccommerce script to list products. Most of the site seems to be mobile responsive, apart from the product images which stay fixed at a height of 500px. I've been trying to make them responsive but seem to have tried loads of methods and none of them work. The image always stays the same size when viewing on mobiles.
Here is the html code which generates each product image on the product page:
<div class="file_image">
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
{IMAGE}
</div></div></div></div></div></div></div></div>
<div class="file_links">
And here is the section in the .css stylesheet which controls this div tag:
.file_image
{
float:left;
margin-right:30px;
width:480px;
text-align:center;
}
Is there something else I need to add somewhere to make this image responsive? I've tried several things but they don't seem to work. If anyone can help me out here, that would be great. Thanks :)
Try adding this,
.file_image img
{
width:100%;
height: auto;
}
you should try to set your image width in max-width instead of width for this case.
.file_image {
float: left;
margin-right: 30px;
width: auto;
max-width: 480px;
text-align: center;
}
Hope it might help.
Good Luck'
Related
Trying to find the answer quite long, but I am not even sure how to express the question to searchbar - so I'll try to explain here and if you know that it was already answered I will be happy for the link :)
I am creating a wordpress theme using The Underscores framework. I want make my header to be dependent on the background image height. I mean - I can upload there an image of any size and header's width will be 100 % of image and height wll be dynamically change according the screen size.
Better for imagination, here's an example:
http://hitchdiary.cz/
Try to change size of the window - image is allways fully displayed and the height of the header changes.
So that's what I want. What I have is a static size header and background image is adjusting according the screen size.
.site-header {
height: 100%;
width: auto;
background-color: #000;
background-size: 100%;
}
Header image is set by user in wordpress adjust section. In code it is this way:
<?php if ( get_header_image() ){ ?>
<header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
<?php } else { ?>
<header id="masthead" class="site-header" role="banner">
<?php } ?>
Thanks for any advice. Sorry if that's obvious. I'm quite a newbie.
WHAT'S GOING NOW:
demo
The height is calculated automatically according to the content in the div. By setting it to 100% you're telling it to take the height of the parent container.
Setting height to auto will solve your problem.
.site-header {
width: auto;
background-color: #000;
background-size: 100%;
}
or
.site-header {
height: auto;
width: auto;
background-color: #000;
background-size: 100%;
}
Flexible Width
Sorry I mistook it to be flexible width instead of height. Please ignore what comes below this statment. However it might help you in adjusting width in the future.
By default div, header, footer etc are block elements. They take up 100% of the parent div.
Say you have a
<div class="parent" style="width:500px;">
<div class="child"> </div>
</div>
Here the inner div takes up 500px as well.
I tried out similar code, all you have to do set display to inline.
.site-header {
display: inline;
}
You can even try floating it to the left/right in case making it inline doesn't work.
You can read more about the differences between block and inline
I did some search here and tried different codes that was recommended but none seems to work. Sorry if this is a basic question but I'm very new to coding.
I'm trying to centre and fit an image to the browser window. What code do i need to use?
P.S the image isn't my background image. I'm changing the color of the background and want this image on top of the background image.
This is the code i have
<body>
<div id="clock">
<img src="images/clock.png" alt="">
</div>
</body>
What CSS code do i need to use to achieve what I'm trying to do?
The first image is how its showing on the browser (basically can only see part of the image since it's enlarged)
The second image is how I want it to look
Add some styling for that image. Add this to your css file:
#clock img{
width: 100%;
}
#clock{
width:100%;
text-align:center;
}
#clock img{
height:100px;
width:auto;
}
<div id="clock">
<img src="http://pngimg.com/upload/clock_PNG6611.png">
</div>
here you can increase or decrease image height:100px; but make sure width is auto otherwise the aspect ratio of that image will effect
try this may help you
#clock
{
margin:0px auto;
text-align:center;
}
#clock
{
max-width:100%;
}
problem
I want my div to shrink in line with a flash image when the browser is resized but it won't.
The margins appear to get larger.
.slider {
background-color:#666;
max-height: 100%;
margin-top:0;
margin-bottom:0;
}
<div class="slider">
<embed src="images/slider2/slider2.swf" width="100%"></embed>
</div>
My other divs, menu for example shrink fine so I assume it's something to do with the flash??
Many thanks... probably a stupid question!
Are there any more suggestions please? If I insert an image instead of the flash, it's fine. So the problem must be related to how the browser treats flash or that I am failing to do whatever is necessary to allow for it. Thanks
.slider {
float:left;
background-color:#666;
max-height: 100%;
margin: 0 0;
}
<div class="slider">
<embed src="images/slider2/slider2.swf" width="100%"></embed>
</div>
Does it work now ?
Please do not forget to tick on the answer if it helped you.
I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.
I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.
If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).
Check out the attachment to see what I mean.
Sean
http://i45.tinypic.com/2n862ys.png
In CSS:
header{ min-width: 940px; width: 100%; overflow: hidden; }
.headerImage { display: block; margin: 0 auto; }
Then in HTML:
<header>
<img class="headerImage" src="./Images/HeaderImage.png" alt="" />
</header>
If you have a image larger than the 940px that you would like as your width then you could just set the background position of your image to be centered so if it increases or decreases the image wont move just the amount that is shown.
Another method could be is to repeat the background image so it wont end... but that depends on what sort of image you are using...
Try this
<style type="text/css">
img {
min-width:940px;
width:100%;
height:auto;
}
</style>
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.