16
Replies
First, fix your code errors.
https://validator.w3.org/nu/?doc=https%3A%2F%2Ftraumainchildhood.com%2Findex1.html
You're using Bootstrap 4.4. Use the m (for margins) and p (for padding) utility classes set to 0.
https://getbootstrap.com/docs/4.6/utilities/spacing/
Also give your image a width of 100% which will scale to fit all screen sizes, big & small. NOTE: Some pixelation may occur on larger screens. Whenever possible, use Scalable Vector Graphics for web images. SVGs retain sharp, crisp picture quality on all screen sizes. Bitmaps (JPG, PNG) do not.
<div class="container-fluid">
<div class="row">
<div class="col-12 m-0 p-0">
<img style="width:100%" src="https:/dummyimage.com/1200x300" alt="placeholder">
</div> <!--/col-->
</div><!--/row-->
</div><!--/container-->
Thank you for your help. When I look at the site on my typical sized monitor this is what I get:
I don't understand the image does not reach the end of the div. Any ideas? I did increase the width to 2000px from 1800px and still get the same results.
I will figure out how to get the text onto the image properly.
Thank you for your help. When I look at the site on my typical sized monitor this is what I get:
I don't understand the image does not reach the end of the div. Any ideas? I did increase the width to 2000px from 1800px and still get the same results.
By @beng2000
Just add w-100 to the class declaration:
class="img-fluid w-100"
Hello osgood. Can you point me in the right direction to place text over the responsive image that I'm using? Much appreciated.
By @beng2000
If it were me I wouldn't be using Bootstrap. I would first suggest that you use a background image for your main hero image instead of an inline image because that image is going to look a bit silly on mobile devices unless you swap it out for each particular device i.e desktop, tablet and mobile
Set your html up as simply as below:
<div id="hero">
<h2>Some text goes in this space here</h2>
</div>
Then I would build my own css styling (see below) as its much more controllable that is Bootstraps default classes as usually that only offers a very limited range of sizing:
You also need to take into consideration were you are going to position the text on mobile devices because as the image decreases in size to fit on narrower screens, so does the room for the text. I suggest when the browser width gets to 850px wide the text is repositioned at the foot of the image.
The css below presents what I think could be a possible solution for desktop/tablet and smartphone.
#hero {
height: 450px;
position: relative;
background-image: url('https://traumainchildhood.com/images/happyfamily.jpg');
background-position: center -10px;
background-size: cover;
background-repeat: no-repeat;
border-top: 10px solid #028180;
}
#hero h2 {
width: 70%;
max-width: 1000px;
margin: 40px auto 0 auto;
padding: 0;
color: #000;
font-size: 40px;
}
@media screen and (max-width: 850px) {
#hero {
display: flex;
height: 350px;
background-position: center -50px;
}
#hero h2 {
position: static;
font-size: 30px;
padding: 10px;
background-color: #028180;
color: #fff;
width: 100%;
text-align: center;
align-self: end;
}
}
@media screen and (max-width: 600px) {
#hero {
height: 250px;
background-position: center -40px;
}
#hero h2 {
font-size: 22px;
}
}
I don't know who Ben is. 😕
...don't understand the image does not reach the end of the div.
=========
By default, images don't scale up beyond their native file size. This is because small pixel-based images will distort if they are upscaled too much.
A better approach is to use the <picture> element with SRCSET and separate images for each device width. This way users don't have to consume needless excess bandwidth.
<picture>
<source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
<source srcset="logo-480.png, logo-480-2x.png 2x">
<img src="logo-320.png" alt="logo">
</picture>
AdChoices