Responsive CSS with Images - html

I am trying to achieve the following in the image posted below. When I resize the browser I want the image and button to decrease in size but maintain the same ratio with the main background. I also want the text to not overlap the image so the font size should get smaller. How can I achieve this in css? Heres the image: http://i.imgur.com/2qR2y4E.png
This is the HTML code I believe should be correct. I've tried in the CSS absolute positioning of the image, i've tried floating each element and using percentages for widths. If it gets to a mobile width I would just display:none on the image but keep the button. Any help is appreciated.
<div class="content">
<div class="text>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</div>
<div class="image">
<img src=".." />
<div class="button"></div>
</div>
</div>

I have created a fiddle based on the link by Jake - http://jsfiddle.net/GkrpR/2/
It changes the size of the image and text box when you resize the screen.
It's a bit rough, so will require you to change the css values to suit your needs. But should be a good start for you.
It uses media queries in the css to check the max screen size, and then changes styles based on that.
As an example, when the screen size gets to 300px or less the following style is used:
#media screen and (max-width:300px){
.image img{width:45px;height:50px;}
.text{height:30px;font-size:6pt;color:#aaf;}
.main{width:100px;}
}
Hope this helps

Related

Responsive Navbar with large Image

I am trying to make a responsive navbar which so far I have achieved the only thing left that I would like to do is fix how the navbar looks in smaller windows.
As you can see small resolution the navbar overlaps the image when you get to smaller resolutions.
And when you are on desktop resolutions it looks like this enter link description here the navbar to the right doesn't quite look right.
If anyone could point me to some resources that would help me fix this or if anyone could explain what I would need to change that would be great.
Also can anyone tell me how I can link my code so that it makes it easier for you guys to see what I have done.
Thanks
Here are a few techniques you could use for your logo.
remove any width or height attributes from the image tag and then scale it based on the viewport width. eg
HTML
<div class="header"> <img src="logo.jpg" class = "logo"> </div>
CSS
.logo{
width:50vw;
max-width:500px;
}
you could add more than one image tag in your header, one for desktop and one for mobile. Use a different class for each then use CSS media queries to hide or show one logo at a time based on viewport width.
HTML
<div class="header"><img src="logo-desktop.jpg" class = "logo desktop"> <img src="logo-mobile.jpg" class = "logo mobile"> </div>
CSS
.logo{
display: none;
}
.logo.mobile{
display:block;
}
#media (min-width: 768px) {
.logo.mobile{
display:none;
}
.logo.desktop{
display:block;
}
}
one of my favourite techniques is to use background images rather than using an image tag. This makes it easy to overlay text if needed, and it's efficient on mobile because you can use media queries to define different images at different viewports and just one will be downloaded.
I hope this helps!

Assistance with having a div stay in position multiple resolutions

I am working on a website and i am having a programming issue with a floating div.
I am trying it to stay the same width no matter the resolution.
I made a fiddle with my code.
What did i do wrong?
Btw it is being used in a bootstrap theme I purchased.
Jsfiddle: https://jsfiddle.net/dvmad/960a15nm/2/
<div class="container rotatingimagetextpadding">
<div class="rotatingimagetextholder">
<img src="assets/images/genericassets/slider_img_1.png" alt="lincoln" />
<span class="rotatingimagetext" >Verbiage</span>
</div>
</div>
Take away the padding percentages and set absolute dimensions using px instead in your #media. The percentages is what is changing the size when you shrink the screen.

How to make image responsive with Bootstrap?

I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.

Bootstrap 3 fixed width layout, full width footer

I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width

automatical resize of a backgorund image

hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;