I have created a text block on an image but when I check the site on iPad and iPhone the image stays ok, but the text moves.
How can I make this text responsive?
Link: http://test.preci-dental.be/home/
This is the code I used:
<style>
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
left: 95px;
right: 740px;
background-color: white;
opacity: 0.75;
color: black;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<center><img src="http://test.preci-dental.be/wp-content/uploads/2019/01/helping-your-child-trust-the-dentist-1110x450-1024x415.jpg" alt="Nature" style="width:90%;"></center>
<div class="text-block">
<h1 style="color:#749C91;">Preci-Dental</h1>
<br><p style="color:black;">Welkom bij tandartspraktijk Preci-Dental. De groepspraktijk werd door Liesbeth en Karel opgericht in 2019 en is gevestigd in Bertem, gelegen tussen Leuven en Brussel. Bij Preci-Dental streven we naar moderne mondzorg op maat voor iedereen: precieze en persoonlijke service, gebaseerd op bewezen efficiënte en moderne technieken.</strong></p>
</div>
</div>
Thank you in advance!
If you don't mind on using media queries, i guess this should solve your problem:
PS: I used "!important" because i injected the code via plugin. Maybe is not needed in your case.
I'm also assuming you want the text area as 70% of your viewport width and 600px as max-width in your media query. So, when your viewport width is smaller than 600px, the code will override your css for this selector.
About media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
#media only screen and (max-width: 600px) {
.text-block {
left: auto !important;
right:auto !important;
min-width:70vw;
}
}
so I've seen answers to this question but they don't seem to work on my site.
Why do my background images not cover the whole div? As I decrease the screen width the elements are getting longer but the section background stays the same.
Apologies for quite a lot code coming up but I thought it best to show the whole picture.
Thanks in advance for any help.
html
<section class="about">
<div class="row">
<h2 id="trabajo">Cómo trabajo</h2>
<p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
</div>
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
<div class=row>
<p class="your-voice">¡Entonces soy tu voz!</p>
<div class="btn-container">
¡Pide tu presupuesto!
</div>
</div>
</section>
CSS
.about {
height: 100vh;
background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.about:after {
position: absolute;
width: 70px;
height: 70px;
top: 100%;
left: 50%;
margin-left: -35px;
content: '';
transform: rotate(45deg);
margin-top: -35px;
background-color: #D65A6A;
}
#trabajo {
color: white;
text-align: center;
font-weight: 400;
font-size: 150%;
position: relative;
margin-top: 10px;
letter-spacing: 1px;
}
#about-subheading {
text-align: center;
position: relative;
margin-top: 20px;
}
.about-container {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr 120px;
}
.col {
text-align: center;
margin-top: 20px;
padding: 20px;
}
.fas {
font-size: 200%;
color: white;
}
.fa-plane {
transform: rotate(320deg);
}
.about-h3 {
margin-top: 30px;
font-size: 100%;
font-weight: 400;
}
.about-p {
margin-top: 20px;
font-size: 80%;
line-height: 23px;
font-weight: 100;
}
Pretty new to this so thanks in advance :)
Here is the image
I copied and pasted your code to test it. With the code you gave, your image covers the entire <div>, with no awkward looking blank space between the <div>.
When I go into the responsive design mode of the firefox browser I'm using (right click screen -> inspect element -> go to the top right button of the window that pops up, or ctrl+shift+M on windows)... When I set the height to 800px wide by 450px high, the wider you make it, the image starts expanding length wise as you wanted.
The reason for this is because you have background-size: cover;, which resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
I have a 1920x1080 px screen, and this same principle happens outside of responsive design mode too, though the height expands shortly before the max width of my screen. Besides that small window of expansion, the image stays the same size all the way until my browser window is as skinny as it can get, which is around 250px, again, because of background-size: cover;. A lot of the image is cut off too. You can read more about that property here.
Other than what I said above, if your image is not expanding in height as I said it did, your problem then is most likely from some other inherited css class, which you need to show to help debug it. So check the css classes inside any containing elements that your <section> tag is in.
ANOTHER TIP: You only gave 1 image here, but your words sound like you have many. Because your .about class is position: fixed;, then only that image will show up. If you want any other images to show up in their own <div>'s with the same fixed positioning, you'll need to copy/paste the original class, but change the name slightly, and the image path to a new image.
For anyone facing the same issue I've just solved my problem.
I just changed 'height: 100vh' to 'min-height: 100vh' and it seems to have done the job!
I have a box with an image at the right-side and text at the left-side. The box should have a white background. At smaller screens the text goes below the image which is good.
A few px above the bottom of the box I want to have a button.
Think I should do that by using position relative for the box and position absolute for the button.
The CSS and HTML code is
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
.button {
vertical-align: middle;
position: absolute;
bottom: 40px;
margin-left: 15px;
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Problem is that on smaller screen the text is displayed over the button. Another issue is that padding of the text does not prevent it getting connected to image (laptop/desktop). I do not want to add margin-left to picture because I want the line <hr>to be connected to the image.
The button is over the text because you have used position:absolute to the button.
Set position:relative and bottom:auto in the smaller screen using media query rule...
Also using vertical-align: middle; in the absolute positioned elements will do nothing...so better to remove it
Stack Snippet
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
I have 2 div I need to position next to each other, with eventually a 3rd to be added. I've tried floating them, I've tried display and position options.
also checked other websites copied that code but it still won't work.
html:
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
<img src="Foto's/IMG_2704.JPG">
</p>
</div>
</div>
css:
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: relative;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 900px;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
Add display: flex to the parent, and remove the huge margin-left on #dienst2 - or don't, isn't necessary, but I did since you want them to be beside one another. Any other elements you put adjacent to them will display in the same row.
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: relative;
height: 500px;
background-color: #FFFFFF;
margin: auto;
display: flex;
}
#dienst1 {
margin-left: 90px;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast
worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen
en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een
visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
<img src="Foto's/IMG_2704.JPG">
</p>
</div>
</div>
You should add display:inline;and remove margin
#dienst1 {
margin-left: 90px;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
display:inline;
}
#dienst2 {
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
display:inline;
}
Divs are initially block level elements. This means, among other things, that they each appear on their own lines. There are several ways to put two divs along side each other. Which one you choose will come down to the desired effect (and side effects) you want. Here are some options:
Float them (float: left)
Make them inline block (display: inline-block)
Use flexbox (apply display: flex to their parent)
Make them grid items (apply display: grid to their parent; very new feature and requires fallbacks)
I suggest you read up on CSS layout methods. Each method is a useful tool, and none is a one-size-fits-all solution. You should try to get familiar with them all. A great resource to get started is learnlayout.com. Once you get the basics down, if you want to dive deeper, you can check out my book.
If you are going to add 3 divs next to each other you need to reduce the width of each div.
500px for each one aint gonna work unless your target audience is that of large desktop;
anyway I reduced it to 300px for both height and width, and made the overflow to
scroll for y axis.
If you want to remove the scroll. (remove overflow-y: scroll; and all the styling) and specify the height so that the content of all the divs is visible)
View in Fullscreen(Stackoverflow forces resize)
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.diens{
width:300px;
height:300px;
font-family:sans-serif;
box-shadow:0px 1px 3px rgba(0,0,0,.6);
padding:20px;
float:left;
overflow-y: scroll;
margin-right:10px;
}
.diens h2{
margin: 20px 0px;
}
.diens p{
font-size:14px;
}
.diens::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.diens::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
.diens::-webkit-scrollbar-thumb
{
background-color: #373737;
border: 2px solid #F5F5F5;
}
<body>
<div class="diensten">
<div id="dienst1" class="diens">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
</div>
<div id="dienst2" class="diens">
<h2>beheer brandmeldinstallatie</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.
</p>
</div>
<div id="dienst3" class="diens">
<h2>beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
</p>
</div>
</div>
</body>
You just need to add
position: relative;
display: inline-block;
to the child divs, and
position: absolute;
to the parent div. Here is a working example (with 3 paragraphs side by side -- I reduced the width just so you can see them in the small window). You can also remove or reduce the margin if you want.
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 100px;
box-shadow: 0px 0px 30px 0px #000;
overflow: hidden;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 100px;
box-shadow: 0px 0px 30px 0px #000;
overflow: hidden;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 100px;
box-shadow: 0px 0px 30px 0px #000;
overflow: hidden;
}
#dienst2 img{
height: 300px;
width: 450px;
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
<img src="Foto's/IMG_2704.JPG">
</p>
</div>
<div id="dienst3">
<h2>beheer brandmeldinstallatie</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .
<img src="Foto's/IMG_2704.JPG">
</p>
</div>
</div>
Well, I searched a lot and everything that I find didn't work for me, like a curse, what I'm tryng to do is blur a background image when the person that is viewing the web page see the div, I started to make this page a short time ago, as soon as I started to try to learn CSS and JavaScript, so, what I've done is this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>
<div class="bg-img">
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><img src="play.png" class="playButton"></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>
<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>
</div>
</div>
</body>
</html>
css:
#font-face {
font-family: LemonMilk;
src: url(LemonMilk.otf);
}
.playButton {
width: 55%;
height: 40%;
z-index:2;
}
.game {
width: 100%;
height: 100%;
}
body {
background:url('background.jpg') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.botao {
float: rigth;
width: 100%;
height: 100%;
vertical-align: middle;
z-index:2;
}
.info::before {
display: block;
width: 100%;
height: 100%;
background: url('background-blurred.jpg');
background-size: cover;
content: '';
opacity: 1;
}
.info {
background-color: #FFFFFF;
font-family: LemonMilk, Verdana, Tahoma;
padding: 70px;
text-align: justify;
}
.titles {
color: #000000;
text-align: center;
z-index: 1;
}
.macaco {
color: #000000;
}
I want to make something like this: http://jordanhollinger.com/media/bmu-landing.png
Here you go: How to apply a CSS 3 blur filter to a background image
Now, there is typo float: rigth. Also, there are a lot of unnecessary things in your code, but you are beginner. Keep practicing and everything will fall in its place eventually!
And, it is hard to decipher what you want exactly.
" what I'm tryng to do is blur a background image when the person that is viewing the web page see the div,"
Do you mean, when DIV with the picture is visible?