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;
}
}
Related
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 want to make text to be resize in all devices. It looks good when I view in on my PC but when I view it on my phone, it doesn't fit to the box and overlap with the button above and below
Here is my code
.container-profile {
position: relative;
width: 100%;
}
.image {
display: block;
max-width: 100%;
height: auto;
}
.overlay-profile {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container-profile :hover .overlay-profile {
opacity: 1;
}
.text {
color: white;
font-size: auto;
position: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: translate(-50%, -50%);
}
<div class="wrapper bgded; container-profile">
<div class="container-profile">
<img src="https://www.kent.ac.uk/sportsciences/employability/images/image-pending.png" alt="Avatar" class="image">
<div class="overlay-profile">
<div class="text">
<p class="text-justify">SCORE (Standing Commitee on Research Exchange) merupakan Organisasi berbentuk Badan Semi Otonom, bersifat Independent dan berstatus sebagai satu-satunya organisasi penelitian mahasiswa Fakultas Kedoktean Universitas Sumatera Utara yang bergerak
di bidang penelitian dan kelimiahan. Berdiri pada tanggal 19 Agustus 2003 dan berkedudukan di Medan, Kampus FK USU. Semenjak berdiri, SCORE bertujuan untuk mewujudkan dan menumbuhkan budaya ilmiah di lingkungan Kampus Fakultas Kedoktean Universitas
Sumatera Utara. SCORE tergabung dalam Badan Analisis dan Pengembangan Ilmiah Nasional Ikatan Senat Mahasiswa Kedokteran Indonesia (BAPIN ISMKI).</p>
<br>
<p style="font-style: italic; text-align: center;">Scripta Manent Verba Volent <br> "Yang tertulis akan abadi, dan yang terkatakan akan binasa"</p>
</div>
</div>
</div>
</div>
Click here for example
Just need to add a metadata in your HTML file like
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
This will adjust your font size in device.
You can use the media queries to get the different sizes fonts to suit the device you are using.
more about media queries
Set .logoHeader div height auto.
.logoHeader{
height: auto;
min-height: 120px;
}
If That's not the problem. you can check Nitheesh's and Al Amin's answer.
just spend some time to play with Viewport-percentage
viewport-percentage values are:
vw (the viewport width)
vh (the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)
hope your problem will be solve if you use vw like this:
.text {
font-size: 5vw; // OR whatever value you need
}
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?
I Created this site for a school project, it works perfect on all browsers... except safari (and internet explorer but Yeah.. IE..). Anyway my class="logo1" doesn't fall behind my class="middentextvak1" anymore, while it does perfectly on other browsers. I really don't know what to do anymore.
http://athena.fhict.nl/users/i283951/NRV/home.html
I don't know if it's neccesary to put on the code because it's a lot.
I've uploaded 2 pictures in which you can see the logo is placed correctly in the first one:
http://nl.tinypic.com/view.php?pic=fvv8cp&s=8#.U6c87fl_vcM
and in the second one you can see in the picture the logo falling to the bottom:
(see comment, can't post because of rep)
html:
<div class="midden">
<img class="logo1" src="images/logo.png">
<div class="middentextvak">
<h1>Welkom bij autorijschool NRV! </h1>
<p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
<br><br>
Klik hier voor de meest recente slagingspercentage.
</p>
</div>
<div class="contactvlak1">
<h1>Contactgegevens</h1>
<p><b>Autorijschool NRV</b>
<br>Grasplein 2
<br>06-21710000
<br>info#autorijschoolNRV.nl
<br>55.18.77.391 ABN Amro
</div>
</div>
css:
.middentextvak1
{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 43%;
height: 90%;
background: rgba(255, 255, 255, 0.5);
margin-top: 7%;
z-index: 10;
}
.logo1
{
position: fixed;
display: block;
margin-left: 17%;
margin-right: auto;
width:70%;
z-index: -1;
opacity:0.5;
clear: both;
}
Try using position:absolute instead of position: fixed on the .logo1 style. That should position it relative to the midden div.
Also: Safari on Windows is now obsolete, so you only really need to worry about it on a mac.
If you are wanting it to be fixed (ie always in the same position), then this line is preventing that for me in Firefox and Safari -
#media only screen and (orientation:landscape){
body {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
not sure what you are trying to do with that.
It would probably also make more sense to set the logo as a background image if it is working as a background image rather than content.