There is some unexpected behaviour of paragraphs inside a flexbox. This only happens on chrome mobile when checking 'request desktop site' or when you are in the developer tools in chrome and turn on 'device toolbar' and set the device size to something small (like 320x500).
For an example, see the following html:
<html>
<head>
<meta name="viewport" content="width=980">
<style>
p {
border: solid red 1px;
font-size: 16px;
}
</style>
</head>
<body>
<p>These should be the same size</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<p>These should be the same size</p>
<div style="width: 830px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
</div>
</div>
</body>
</html>
Expected behaviour: all the font sizes should be the same. This is clearly not the case, see screenshot.
However, when removing one line from the 'Lorem ipsum' paragraph everthing becomes the same small size (which is also what I expected in the previous example).
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum.</p>
Is there something wrong in this code, is this a browser bug or maybe something in the html/css specification? I only tested this in chrome on android and chrome on windows 10.
use text-size-adjust
<html>
<head>
<meta name="viewport" content="width=980">
<style>
p {
border: solid red 1px;
font-size: 16px;
text-size-adjust:100%;
}
</style>
</head>
<body>
<p>These should be the same size</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<p>These should be the same size</p>
<div style="width: 830px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
</div>
</div>
</body>
</html>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 months ago.
Improve this question
https://jsbin.com/hakuzozari/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="page">
<div="header-page">
<div id="header" class ="container">
<div id="logo">
<h1>Header Logo</h1>
</div>
</div>
<div class="conntent">
<img src="https://pbs.twimg.com/profile_banners/1351534443165528067/1637702650/1500x500" />
</div>
</div>
<div id="threeColumns">
<div id="column1">
<h2> Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
<div id="column2">
<h2> Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
<div id="column3">
<h2> Column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
</div>
</div>
</body>
</html>
hi{ font-family: "impact; } won't change me size off Header Logo .. somebody can help me ? thanks
Fix the below line (add class or id), your code doesn't have any attribute but a value only:
<div id="header-page">
<!-- or -->
<div class="header-page">
<!-- or any other attribute -->
Typo in CSS
1- hi should be h1
2- font-weiht should be font-weight
h1 {
font-weight: normal;
}
And finally, remember using semicolon (;) after every CSS property: value; to complete the declaration and allow any other declarations that comes after it.
font-family: "impact"; <- Complete this by adding ; to allow the style
font-weight: normal; <-
The Code
body{
background: #FFFFFF;
font-family: 'Abel', sans-serif;
font-size: 20px;
color: #3B3B3B;
}
h1 {
font-family: "impact";
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="page">
<div id="header-page">
<div id="header" class ="container">
<div id="logo">
<h1>Header Logo</h1>
</div>
</div>
<div class="conntent">
<img src="https://pbs.twimg.com/profile_banners/1351534443165528067/1637702650/1500x500" />
</div>
</div>
<div id="threeColumns">
<div id="column1">
<h2> Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
<div id="column2">
<h2> Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
<div id="column3">
<h2> Column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate et libero at scelerisque. Suspendisse rhoncus tincidunt metus, ut cursus ipsum placerat venenatis. Nullam neque nisl, rhoncus at est quis, faucibus faucibus neque.</p>
</div>
</div>
</div>
</body>
</html>
Try this:
h1{
font-weight: normal;
font-family: "impact"
}
this works for me using your code provided.
Hope that helps!
I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
I'm quite new into HTML&CSS and I'm having troubles with the model box I think.
Here both elements below "Personal data" aren't at the same height and I can't find the reason. Can anyone help me?
jsfiddle.net/jbzgmqns/
PS: Don't worry about being ugly, everything included the borders are just placeholders.
this is happening because <P>...</p> itself is taking margin.
Set its margin value '0' i.e. margin:0; to keep it in same level of image.
And take <p> inside <div class="cuadro">...</div> as shown below
<div class="cuadro">
<h1>Personal Data</h1>
<div class="imagen">
<img src="http://gobierno.morelos.gob.mx/sites/default/files/images/transparencia/placeholder-transparencia.jpg" />
</div>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Donec efficitur eros quis sapien congue, hendrerit rhoncus magna cursus.
<br> Nam a blandit diam. Curabitur auctor, ipsum eget mattis vulputate, elit ex egestas nunc, sit amet molestie
<br> ante felis porta ligula. Aenean elementum justo sed placerat finibus.</p>
</div></div>
It's because in your code you defined the block height, when you shouldn't:
.block {
height: 700px;
Just remove that and all will be fine.
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
h1{
text-align: center;
font-weight: bold;
}
h3{
color: #09423f;
}
p{
color: black;
}
#works{
max-width: 100%;
height: auto;
border: 0;
}
<h1>HOW IT WORKS</h1>
<div class="row">
<div class="col-xs-4">
<img src="img/create.svg" class="img-responsive" id="works" alt="create">
<h3><b>CREATE YOUR IDEAS</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut.</p>
</div>
<div class="col-xs-4">
<img src="img/sell.svg" class="img-responsive" id="works" alt="sell">
<h3><b>POST IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut </p>
</div>
<div class="col-xs-4">
<img src="img/earn.svg" class="img-responsive" id="works" alt="earn">
<h3><b>EARN IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut</p>
</div>
</div>
I want to try to align all three images with caption in one line. I try float: left but all three didn't work. I try other way too but it remains same. Please help me. You give me right answer I would click green tick.
add this
.col-xs-4{
width: 33.33%;
}
.col-xs-4 img{
text-align: center;
margin: 0 auto;
}
You haven't attached your bootsrap CDN's though you was using Bootstrap like col-xs-4, attach it and then you Boxes will align perfectly horizontal
Bootstrap CDN attach this at the <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
and remove following class which is unnecessary
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
CodePen: http://codepen.io/anon/pen/graKZe
I have attached a bootstrap cdn in your code.
And because of the clear:both in your (.col-xs-4) inside CSS you could not align them horizontally.
plunker copy attached: enter link description here
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
I have a div in which i am showing some text and the div has fixed height and width and overflow hidden. But it is showing different text in firefox, chrome and safari. In chrome and safari one extra line of text is visible.If i remove:
-moz-column-count:2;
-webkit-column-count:2;
property then its working fine in all. But if add this property the it showing different text in firefox and chrome.
I am attaching snapshot for chrome and firefox.
<div style=" width: 710px; height: 70px;position:absolute;overflow:hidden;top=0;left=0;-moz-column-count:2;-webkit-column-count:2;z-index:102;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>
</div>
Chrome view
Fire fox View
You should cut your height or Width tag from that DIV. Further P element needs some style to showing them as column.
<style type="text/css">
div {
width: 710px;
position:absolute;
overflow:hidden;
top=0;
left=0;
-moz-column-count:2;
-webkit-column-count:2;
z-index:102;
}
p {
overflow: hidden;
float:left;
}
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>
</div>