I have issues with my text over my images. The text I have is working when it's in desktop, at least on my computer resolution. But the issue is when I scale it back it doesn't keep up with the images so to say. Any idea how to do so or what is wrong?
HTML:
<div class="col-4 text-center image-capsule mx-auto">
<section class="posters-section">
<a href="/" class="movie-link pop">
<p class="poster-date">Test</p>
<img class="img-fluid poster" data-toggle="popover" src="${app.movie[0].poster}">
</a>
</section>
<h5 class="mt-3">${app.movie[0].title}</h5>
</div>
CSS:
.image-capsule {
width: 33%;
position: relative;
}
.posters-section {
position: relative;
}
.poster {
position: relative;
}
.poster-date {
margin: -5% 26%;
font-weight: bold;
z-index: 100;
background-color: #9c0000;
position: absolute;
width: 51%;
text-align: center;
}
I had an issue similar to this. I fixed this issue by using bootstraps text-center class on the text. This kept them centered in the div holding the picture which kept them together with a picture. Here is an example of what I did.
<div class="margin-intercept shrink-to-necessary-size">
<a href="350_project.html">
<img src="images/IMG_2579.JPG" width="350" height="350">
</a>
<h3 class="picwidth text-center">350 Project</h3>
</div>
This made the text stay centered under the image no matter how the screen shrunk.
Related
Why does my image approach the top of the browser when i resize it, im trying to make responsive for mobile but i cant get it work. Do someone have an idea of what im doing wrong to make this work?
.background-1 {
width:100%;
height: 100%;
overflow:hidden;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #a57354;
text-align: center;
}
<div class="background-1">
<img src="Image-1.png" class="img" />
<div class="title">
<div class="info">
<img class="wow rotateIn img-logo" src="logo.png">
<h4 class="wow fadeinUp"> DIN PERSONLIGA BARBERARE I GÄVLE </H4>
</div>
</div>
</div>
Please check if this helps you .. i have added img-fluid class to both images. thanks
add position:relative to .background-1 class.
if you dont put this then your div which has position absolute will move based on the window. thanks
.background-1 {
width:100%;
height: 100%;
overflow:hidden;
position:relative
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #a57354;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="background-1">
<img src="https://cdn.colorlib.com/shapely/wp-content/uploads/sites/12/2016/03/photo-1422568374078-27d3842ba676-1.jpg" class="img img-fluid" />
<div class="title">
<div class="info">
<img class="wow rotateIn img-logo img-fluid" src="https://www.freelogodesign.org/Content/img/logo-ex-7.png">
<h4 class="wow fadeinUp"> DIN PERSONLIGA BARBERARE I GÄVLE </H4>
</div>
</div>
</div>
Use div instead of img and set your logo as div background. You could have better control on div in your page and It's more standard.
The aspect ratio of your image seems incorrect for mobile displays.
Would suggest you use a different image for mobile, which has height > width. this will lead to the image stretching (bad ux).
If you still want this image to fill the entire screen, then use position: absolute and set the height to 100%;
I know this question has been asked a lot, but I haven't been able to find a solution among the answers. I'm trying to center a text on an image, but I'm having some trouble with the vertical alignment. This is my code:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title">Centered text</h3>
<img src="some image">
</div>
</div>
</div>
and
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
Right now the text is horizontally centered above the image, but I can't figure out how to vertically align it in the middle of the image.
Thanks in advance!
Generally if you're trying to put one element overlapping another, you'll end up using position: absolute or position: relative - otherwise, the contents will naturally arrange themselves in a block flow.
You could try something like this:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</div>
I have a website created in bootstrap so when I go on mobile or tablet the navbar and all the other stuff adjust to the screen size, but I have added 3 boxes and 2 youtube videos and I would like them to adjust to the screen size when I go on mobile or tablet. It looks fine on my desktop but when i look on my mobile the videos and the boxes are out the screen.
Can someone please help me get this done as quick as possible please, it's very important to get it done. Can someone please walk me step by step on how to do this?
Here are some screenshots:
HTML For the 3 boxes which are just images
<div class="img1">
<img src="img">
</div>
<div class="img2">
<img src="img">
</div>
<div class="img3">
<img src="img">
</div>
CSS:
.img1 {
position: relative;
left: 290px;
bottom: -20px;
}
.img3 {
position: relative;
left: 578px;
bottom: 101px;
}
.img2 {
position: relative;
left: 865px;
bottom: 222px;
}
Thats how it looks on my desktop
And thats how it looks on a tablet size, you can probably imagine how it looks on a mobile
If you would like take a look yourself at http://www.praga-light.de, the youtube videos look great just how I wanted them to be but the 3 boxes when you resize the browser they just go out of the screen.
You need youtube video change width size on mobile right?
You add a div wrap to video code,
<div class="ResponsiveVideoWrapper">
<iframe width="854" height="480" src="https://www.youtube.com/embed/CqVqlcBQGYw" frameborder="0" allowfullscreen=""></iframe>
</div>
Css:
.ResponsiveVideoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.ResponsiveVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I have create pure bootstrap grid system. Please try this code
.portfolio-item {
margin-bottom:10px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!------Strat html code-------->
<div class="col-xs-4 portfolio-item">
<div class="embed-responsive embed-responsive-16by9">
<a href="#">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</a>
</div>
</div>
<div class="col-xs-4 portfolio-item">
<a href="#">
<img src="http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 portfolio-item">
<div class="embed-responsive embed-responsive-16by9">
<a href="#">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</a>
</div>
</div>
<!------End html code-------->
About image block, you do not need there div, here is better html
<div class="img1">
<img src="n.png">
<img src="n.png">
<img src="n.png">
</div>
<style>
.img1 {
width: 100%;
}
.img1 a {
display: inline-block;
float: left;
}
<style>
I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?
<div id="discover" class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
<img id="discoveryour" src="img/x.png" class="img-responsive">
</div>
</div>
<div class="row-fluid">
<div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form>
</div>
</div>
</div>
Css:
.withimg {
width: 100%;
overflow:hidden;
padding: 0px;
margin: 0px;
}
#discover{
position: relative;
}
#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;
}
Ah, the good old "how to overlay stuff on top of a responsive image -- responsively" question.
A little tricky, but not too bad. The tricky bit is how to make the stuff's vertical position responsive when the image size changes.
Fear not, here's one simple way to do this:
HTML:
<div class="img-wrapper">
<img class="img-responsive"
src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
CSS:
.img-wrapper {
position: relative;
}
.img-responsive {
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 50%;
}
The img-overlay:before pseudo-class handles the vertical positioning job by pushing the img-overlay div down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50% attribute if you want the button higher or lower).
jsfiddle
To make the button size responsive to window width, you can create a new class for your button. Let's call it btn-responsive (this replaces btn-md in the example above). Then use #media queries to adjust the btn-responsive attributes for different window widths. Something like this:
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
and so forth for other screen widths.
In case you're wondering how to do this with bootstrap 5 (like me), there are new classes that do the trick. For instance, I did this to put a button floating right top over the image (I also use font-awesome but you can use any text/icon you like for the button):
<div class="card">
<img class="card-img-top img-thumbnail" src="someimage.png" alt="alt text">
<div class="card-img-overlay">
<a href="#" class="btn btn-outline-warning btn-sm float-end"
data-bs-toggle="popover" data-bs-content="Edit image" data-bs-trigger="hover focus">
<i class="far fa-edit"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Some title</h5>
<p class="card-text">Some text</p>
</div>
</div>
Check out the official bootstrap documentation for more info.
I have to ask if there's a possibility to replace form tag into another DIV? Then you can just use position: absolute for button. I created fiddle to show how https://jsfiddle.net/1x1pjwk7/
I am trying to cut the top part of an image using css. But using overflow:hidden it automatically starts hiding it from the bottom to top, while I want to keep the bottom part but cut off the top. I see there are only x and y options for overflow.
So I tried it using clip, but this can only be applied when the position is set to absolute or fixed, which breaks my responsiveness (and site overall).
This is how one image looks:
And this is how I want it to look:
This is my html markup of one product tile:
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-img">
<a href="listing/product"><img src="cms/images/website/producten/categorien/product.jpg" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>
Is there an easy way to achieve this? I am not looking for big javascript methods, it would be great if this could be done with a couple of lines of css.
.post-prev-imgbefore img {
border: solid 1px red; /* TO SEE RESULT... */
}
.post-prev-img {
overflow: hidden;
}
.post-prev-img img {
border: solid 1px red; /* TO SEE RESULT... */
}
.post-prev-img a {
height: 120px; /* Your height... */
position: relative;
overflow: hidden;
display: block;
}
.post-prev-img a img {
position: absolute;
bottom: 0;
}
<h1>BEFORE:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-imgbefore">
<a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>
<h1>AFTER:</h1>
<div class="col-md-3 col-lg-3 mb-80 mb-xs-40">
<div class="post-prev-img">
<a href="listing/product"><img src="https://embed.gyazo.com/eb965662ca8fabb1de523e61c16cfe83.png" alt="">
</a>
</div>
<div class="post-prev-title font-alt align-center">
product
</div>
<div class="post-prev-text align-center"></div>
<div class="post-prev-more align-center">
<i class="fa fa-info-circle"></i> Bekijk categorie
</div>
</div>
you can still use overflow: hidden , make the image, position: absolute and set bottom: 0, this way the top will overflow but will be hidden. remember for absolute the parent should be position: relative.
so
.image_container {
overflow: hidden;
position: relative;
}
.image {
bottom: 0;
positon: relative
}
You could try another approach
Firstly you set a div with a defined measures and a
.myDiv{
width:50%;
height:300px;
background-image:url('url_here');
}
And this way you can play with the background properties as background-size. I am not sure if this could solve your problem but in my opinion is the easiest way to work with images.
What about transform the image inside the overflow:hidden-container, bro/sis? :)
.post-prev-img {
height: 250px;
overflow: hidden;
}
.post-prev-img img {
transform: translateY(-40px)
}
Bootply-link (you should use that, too)