Fitting Text to a Container when I zoom inVertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?RegEx match open tags except XHTML self-contained tagsWhen to use margin vs padding in CSSHow do I vertically align text in a div?How do I auto-resize an image to fit a 'div' container?Make the cursor a hand when a user hovers over a list itemHow do I vertically center text with CSS?Cannot display HTML string
What causes long-running disputes over sovereignty?
Why is my read in of data taking so long?
The seven story archetypes. Are they truly all of them?
Terence Tao–type books in other fields?
A fictional island on Earth with "longer" springs and autumns
What was the rationale behind 36 bit computer architectures?
Why can't my huge trees be chopped down?
What do teaching faculty do during semester breaks?
On the strategic interest of giving long lasting stock orders
Strange Cron Job takes up 100% of CPU Ubuntu 18 LTS Server
How can I prevent corporations from growing their own workforce?
Iterate over non-const variables in C++
Where to place an artificial gland in the human body?
How is the uk visa 180 calculated
Spin vs orbital angular momenta in QFT
What does Kasparov mean by "I was behind in three and even in one after six games"?
Print sums of all subsets
Does academia have a lazy work culture?
401(k) investment after being fired. Do I own it?
Area of parallelogram = Area of square. Shear transform
Is it normal practice to screen share with a client?
Is there anything wrong with Thrawn?
Commercial jet accompanied by small plane near Seattle
Why are off grid solar setups only 12, 24, 48 VDC?
Fitting Text to a Container when I zoom in
Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?RegEx match open tags except XHTML self-contained tagsWhen to use margin vs padding in CSSHow do I vertically align text in a div?How do I auto-resize an image to fit a 'div' container?Make the cursor a hand when a user hovers over a list itemHow do I vertically center text with CSS?Cannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to build a responsive website, everything Is ok except that text inside that cloud that says "heyyy!..." as you see In the image below It's ok when I'm not zooming I like that behaviour
but when I zoom In I'm ending up with this ugly behaviour
I don't know how can I solve this problem I tried to put the entire unit of the robot image and the speaking cloud and the text inside a div and applying the position relative to that div and the position absolute to all the items inside it but it didn't work, any solutions please and thank you in advance
this is my code:
.header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div>html css html5 css3
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
|
show 3 more comments
I'm trying to build a responsive website, everything Is ok except that text inside that cloud that says "heyyy!..." as you see In the image below It's ok when I'm not zooming I like that behaviour
but when I zoom In I'm ending up with this ugly behaviour
I don't know how can I solve this problem I tried to put the entire unit of the robot image and the speaking cloud and the text inside a div and applying the position relative to that div and the position absolute to all the items inside it but it didn't work, any solutions please and thank you in advance
this is my code:
.header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div>html css html5 css3
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybetop-margin: 76.4%my example is just to illustrate you can use decimals...
– MonneratRJ
Mar 26 at 16:55
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
1
You could prevent zooming on mobile in the first place:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
– Leaf
Mar 26 at 20:40
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
1
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32
|
show 3 more comments
I'm trying to build a responsive website, everything Is ok except that text inside that cloud that says "heyyy!..." as you see In the image below It's ok when I'm not zooming I like that behaviour
but when I zoom In I'm ending up with this ugly behaviour
I don't know how can I solve this problem I tried to put the entire unit of the robot image and the speaking cloud and the text inside a div and applying the position relative to that div and the position absolute to all the items inside it but it didn't work, any solutions please and thank you in advance
this is my code:
.header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div>html css html5 css3
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
I'm trying to build a responsive website, everything Is ok except that text inside that cloud that says "heyyy!..." as you see In the image below It's ok when I'm not zooming I like that behaviour
but when I zoom In I'm ending up with this ugly behaviour
I don't know how can I solve this problem I tried to put the entire unit of the robot image and the speaking cloud and the text inside a div and applying the position relative to that div and the position absolute to all the items inside it but it didn't work, any solutions please and thank you in advance
this is my code:
.header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div> .header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div> .header-box
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
.main-nav
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
.main-nav__link
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
.text
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.name
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
.vector-1
position: relative;
height: 37vh;
.img-dialogue
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
.dialogue
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
.img-header
width: 60%;
position: absolute;
bottom: 9px;
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div>html css html5 css3
html css html5 css3
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
edited Mar 26 at 17:33
Eddie
3162 silver badges13 bronze badges
3162 silver badges13 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
asked Mar 26 at 16:45
Med Amine ElwereMed Amine Elwere
1922 silver badges10 bronze badges
1922 silver badges10 bronze badges
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybetop-margin: 76.4%my example is just to illustrate you can use decimals...
– MonneratRJ
Mar 26 at 16:55
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
1
You could prevent zooming on mobile in the first place:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
– Leaf
Mar 26 at 20:40
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
1
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32
|
show 3 more comments
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybetop-margin: 76.4%my example is just to illustrate you can use decimals...
– MonneratRJ
Mar 26 at 16:55
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
1
You could prevent zooming on mobile in the first place:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
– Leaf
Mar 26 at 20:40
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
1
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybe
top-margin: 76.4%my example is just to illustrate you can use decimals...– MonneratRJ
Mar 26 at 16:55
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybe
top-margin: 76.4%my example is just to illustrate you can use decimals...– MonneratRJ
Mar 26 at 16:55
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
1
1
You could prevent zooming on mobile in the first place:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">– Leaf
Mar 26 at 20:40
You could prevent zooming on mobile in the first place:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">– Leaf
Mar 26 at 20:40
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
1
1
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32
|
show 3 more comments
1 Answer
1
active
oldest
votes
I think your issue is derived from the lack of a set font-size. When the browser renders your font, it will render it to the size, roughly of the browser. I'd recomend, if the text is positioned by you and not an image, then to use the value vw or vh. These are great for responsive designs and are initiated by the browser size similarly to percents. Then try to use the vw or vh to adjust the size of your font and position, and you should be good to go!
Here is an article by CSS-Tricks on Viewport Units - https://css-tricks.com/fun-viewport-units/
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55362287%2ffitting-text-to-a-container-when-i-zoom-in%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think your issue is derived from the lack of a set font-size. When the browser renders your font, it will render it to the size, roughly of the browser. I'd recomend, if the text is positioned by you and not an image, then to use the value vw or vh. These are great for responsive designs and are initiated by the browser size similarly to percents. Then try to use the vw or vh to adjust the size of your font and position, and you should be good to go!
Here is an article by CSS-Tricks on Viewport Units - https://css-tricks.com/fun-viewport-units/
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
add a comment |
I think your issue is derived from the lack of a set font-size. When the browser renders your font, it will render it to the size, roughly of the browser. I'd recomend, if the text is positioned by you and not an image, then to use the value vw or vh. These are great for responsive designs and are initiated by the browser size similarly to percents. Then try to use the vw or vh to adjust the size of your font and position, and you should be good to go!
Here is an article by CSS-Tricks on Viewport Units - https://css-tricks.com/fun-viewport-units/
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
add a comment |
I think your issue is derived from the lack of a set font-size. When the browser renders your font, it will render it to the size, roughly of the browser. I'd recomend, if the text is positioned by you and not an image, then to use the value vw or vh. These are great for responsive designs and are initiated by the browser size similarly to percents. Then try to use the vw or vh to adjust the size of your font and position, and you should be good to go!
Here is an article by CSS-Tricks on Viewport Units - https://css-tricks.com/fun-viewport-units/
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
I think your issue is derived from the lack of a set font-size. When the browser renders your font, it will render it to the size, roughly of the browser. I'd recomend, if the text is positioned by you and not an image, then to use the value vw or vh. These are great for responsive designs and are initiated by the browser size similarly to percents. Then try to use the vw or vh to adjust the size of your font and position, and you should be good to go!
Here is an article by CSS-Tricks on Viewport Units - https://css-tricks.com/fun-viewport-units/
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
answered Mar 27 at 1:55
Jordan DuntonJordan Dunton
541 silver badge8 bronze badges
541 silver badge8 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55362287%2ffitting-text-to-a-container-when-i-zoom-in%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I guess you would be better with percentages, when you zoom in, the div should go down a proportional size to keep it above the cloud... you could try to use top-margin property with percentage and try to find that sweet-spot where it will always be upon the cloud... maybe
top-margin: 76.4%my example is just to illustrate you can use decimals...– MonneratRJ
Mar 26 at 16:55
Why exactly would you zoom?
– IvanS95
Mar 26 at 17:37
1
You could prevent zooming on mobile in the first place:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">– Leaf
Mar 26 at 20:40
@IvanS95 that's for the best user experience I'm I right or not?
– Med Amine Elwere
Mar 26 at 23:08
1
@IvanS95 it looks Ok without zooming so should I leave it like this? sorry dude I'm just a beginner doing my best to develop my skills
– Med Amine Elwere
Mar 26 at 23:32