I am not an expert developer and have limited knowledge about CSS. I am facing overlapping problem in Safari and Internet Explorer 10+.
In Firefox, Google Crome and Opera my code is working fine but in
Safari and IE - text are overlapping.
Please supply a whole CSS code as I do not know much of it.
My code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing:
border-box; box-sizing: border-box; }
*{box-sizing: border-box; padding: 0; margin: 0;}
body { margin: 0;}
footer { border: 1px solid #ccc; padding: 1.25em; background-color: #c0c0c0;
}
.max-width {max-width: 1400px; margin: 0 auto;}
.site-container { position: relative; margin: .5em; }
.left-column { border: 2px solid #ccc; padding: 0.40em; }
.right-column { border: 0px solid #ccc; padding: 1.25em; background-color:
#ffffff; }
.floating-inline{display: inline-block;vertical-align: middle;}
.nav { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0;
}
img {
max-width: 100%;
height: auto;
}
header{position: fixed; left: 0; top: 0; width: 100%; height: 70px;
background: #6633cc; z-index: 3; color: #fff; text-align:center; font-size:
20px; padding: 10px 0;}
.panel{ height: 100%; position: absolute; top: 0 }
.center{padding:0px 190px 0 207px; position: absolute; width:100%; top: 0;
left: 0; background: #ffff99; overflow-y:scroll}
.left{ padding: 5px 0 0 0; left: 0; width:200px; background: #0f0; z-
index:2;}
.right{ padding: 5px 0 0 0; right: 0; width: 200px; background: #f00; z-
index:2;}
#media (max-width: 1024px) {
.left { display: none; }
.right { display: none; }
.center{padding:0px 6px 0 10px; position: absolute; width:100%; top: 0;
left: 0; background: #ccffcc; overflow-y:scroll}
}
/* MEDIA QUERIES */
#media screen and (min-width: 47.5em )
{
.left-column { margin-right: 22.5em; }
.right-column { position: absolute; top: 0; right: 0; width: 21.75em; }
}
</style>
</head>
<body>
<header>
Nevigation Menus Goes here <br>
Menu 1 , Menu 2, Menu 3 <br>
</header>
<nav class="left panel" align="center">
<br><br><br> <img src="196 x1000-Left.jpg" width="196" height="650"
border="0" alt="img">
</nav>
<aside class="right panel" align="center">
<br><br><br>
<img src="196 x1000-Left.jpg" width="196" height="650" border="0" alt="img">
</aside>
<section class="center panel"> <br><br><br><br><br>
<div class="max-width">
<div class="site-container">
<main class="left-column">
<h2>Left Column (fluid)</h2><br>
<p align="justify" >
<b>1st Para </b> : Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>2nd Para </b>: Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<br> <br>
<b>3rd Para </b>:Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>4th Para </b> :Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>5th Para </b> : Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum</p>
</main>
<aside class="right-column">
<h2>Right Column</h2><br>
<h4> This Flots below Left Column while resizing </h4>
<br>
<p align="justify">Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
<br>
</aside>
</div>
<footer>
<div id="my_menu" align="center">
Home | Bloggs
| Contact
</div>
</footer>
</div>
</section>
</body>
</html>
Snapshot of problem: https://i.stack.imgur.com/PLcQd.jpg
Finally I got the answer... It was so simple....Just one word...
Removing
<main class="left-column">
Above -
Left Column (fluid)
Just adding
<aside class="full-width-aside left-column">
THATS ALL. It finally Solved my Problem
Related
.aboutus {
width: 100%;
min-height: 334px;
}
.aboutus__content {
z-index: 1;
position: relative;
color: orange;
max-width: 1800px;
margin: 0 auto;
}
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
img {
position: absolute;
height: auto;
width: 100%;
z-index: 0;
bottom: 0;
right: 0;
}
<div class='wrapper'>
<div class='aboutus'>
<div class='aboutus__content'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class='aboutus__imageWrapper'>
<picture>
<!-- Media query images go here -->
<img src='https://www.visitmosselbay.co.za/wp-content/gallery/mossel-bay-photo-gallery/Mossel-Bay-Cape-St-Blaize-Lighthouse.jpg'>
</picture>
</div>
</div>
</div>
The idea is to make the image match the height of aboutus container. While the aboutus container height has min-height and also can be expanded but aboutus__content container.
I am a bit confused why aboutus__imageWrapper with height: 100% doesn't expand to the height of it's parent aboutus
Remove overflow:hidden from this rule:
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
I would like to make my page responsive, on a smaller screen.
I haven't used bootsrtap for this, here is how it is now. Probably I should but not sure if I can :
Is it possible to use bootstrap for this absolute positioning?
Thanks a lot, I hope it s clear enough with the drawings
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
</div>
</div>
<div class="map-search-results">
</div>
</div>
and the css
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 100%;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
}
.map-search-results{
width: 100%;
}
And here is what I would like:
This might be helpful.
body, html{
padding:0;
margin:0;
}
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width:100%;
height: 500px;
background:lightblue;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
border:5px solid red;
}
.map-search-results{
padding:20px;
border:5px solid orange;
}
#media (max-width:767px){
.map-filter{
position: relative;
left:0;
top:0;
margin-top: 20px;
margin-bottom: 20px;
padding:20px;
}
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
<h2>map filetr</h2>
</div>
</div>
<div class="map-search-results">
<h2>map search</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.map-bg {
background: url('https://www.ryansleeper.com/wp-content/uploads/2018/05/Tableau-Sales-by-State-Symbol-Map-with-Background-Map.png');
background-size: cover;
padding: 100px 20px;
}
.key-results {
padding: 40px 20px;
}
#media screen and (max-width: 767px) {
.map-bg {
background: none !important;
padding: 40px 20px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
<section class="key-results">
<div class="container">
<div class="row">
<div class="col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
If you need that map background on small devices just remove the media query.. Hope it'd help :)
I want to place my paragraph text on the right side of an image, just like in this mockup:
https://imgur.com/a/ArDIEqH
I aligned the text by setting the display of the parent to flex and it now looks like this:
https://imgur.com/a/wECtedW
The text is dropping on a new line on each word, how can I make it look like in the mockup?
.zodiac-info {
width: 500px;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
width: 200px;
}
.blog-entry-container {
margin-top: 100px;
margin-left: 250px;
}
.blog-entry {
display: flex;
}
```
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</section>
I just update your code with few CSS changes. Try this I hope it'll help you out. Thanks
.zodiac-info {
margin: 100px auto 0;
padding: 0 20px;
}
.blog-entry {
display: flex;
margin-top: 20px;
}
.blog-entry img {
flex-shrink: 0;
height: 120px;
width: 120px;
}
.blog-detail {
color: black;
margin-left: 10px;
}
.blog-detail label {
font-weight: bold;
}
.blog-detail p {
margin: 5px 0;
}
.blog-detail small {
font-style: italic;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
</div>
</section>
use float: left and float: right to move the text and image all the way.
Since both the image and the paragraph are in the same div, you can use absolute and relative positioning.
.blog-entry {
position: relative;
}
.zodiac-paragraph, .test-img {
position: absolute;
}
Try to look at this codepen if this solves your prob.
https://codepen.io/jls314/pen/EJjVzK
You can use css grid or flexbox. You use flexbox, so:
.zodiac-info {
display: flex;
justify-content: center;
}
.blog-entry {
display: flex;
align-items: center;
padding: 1rem 0;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
}
.blog-entry img {
width: 180px;
height: 180px;
min-height: 180px;
object-fit: cover;
flex: 1;
}
p.zodiac-paragraph {
padding: 0 0 0 1rem;
margin: 0;
}
.blog-entry-container {
display: flex;
flex-direction: column;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img"></p>
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
</div>
</section>
You can try this
.blog-entry{display: in-line-block}
I have an article that contains a title (h4), an image that is floated left and some text.
When the title precedes the image in the HTML declaration, it is displayed above the image.
When the image precedes the title, the title is displayed to the right of the image.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4>Title is above image</h4>
<img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
The HMTL above is rendered as can be seen below:
How can I use CSS to render the title to the right of the image when the title precedes the image in HTML ? I am looking for a solution where the HMTL is not changed in any way.
The natural thing would be to change the markup - here is a clumsy hack using positioning and negative margins (assuming the image width is fixed) - see demo below:
article {
clear: both; /* clear the float after each article - this is important */
}
img {
margin: 1em;
border: 1px solid black;
float: left;
}
#a1 {
padding-top: 30px; /* put some space at the top */
}
#a1 h4 {
position: absolute; /* positione the title in that space*/
left: 240px;
top: -10px;
}
#a1 img {
margin-top: -15px; /* shift the image to the top */
}
<article id="a1">
<h4>Title is above image</h4>
<img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="https://via.placeholder.com/200" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<h4> has a default display of block, which takes up the whole line. Give it the style of display: inline; and it will make the image and the text in the same line as it. Since the image has float: left;, it will automatically go to the left. However, since the text is still next to the <h4>, and a couple <br>'s to make it how you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4 style="display: inline;">Title is above image</h4>
<img src="images/about.jpg" alt="about" /> <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
I am having an issue with the column-count CSS property.
I am using it along with media queries to make my pagesmore dynamic when going to mobile.
However I am having the issue of a large gap between my forms.
At the moment I am hard coding a height as a 'fix' but this can't be the right method.
Has anyone experienced this type of problem?
#media only screen and (min-width: 400px) {
.masonry {
column-count: 1;
}
}
#media only screen and (min-width: 700px) {
.masonry {
column-count: 2;
}
}
.masonry {
margin: 1.5em 0;
padding: 0;
column-gap: 1.5em;
font-size: .85em;
/*********Hard Coded Height Needs to be looked at***********/
/* height:940px; */
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 1px 0 1.5em;
width: 100%;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px #ccc;
border: 0px;
}
.legendTitle {
font-size: 25px;
font-weight: 500;
font-family: 'Pacifico';
}
<form class="masonry">
<fieldset class="item">
<legend>
Heading1
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading2
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading3
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMakeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMakeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
</form>
<form class="masonry">
<fieldset class="item">
<legend>
Heading4
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading5
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading6
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
</form>
JSFiddle Demo
Use display grid instead of columns and it's dense setting:
Oops, columns on wrong div - here:
html:
<div id="wrapper">
<form class="masonry">
.....
</form>
</div>
css:
/* add a wrapper div */
#wrapper {
display:grid;
/* no columns mentioned here because we put them in the #media calls at the bottom of the layout css */
grid-gap: 1.5em;
grid-auto-flow: dense;
}
.masonry {
margin: 1.5em 0;
padding: 0;
/* column-gap: 1.5em; */
font-size: .85em;
/*********Hard Coded Height Needs to be looked at***********/
/* height:940px; */
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 1px 0 1.5em;
width: 100%;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px #ccc;
border: 0px;
}
.legendTitle{
font-size: 25px;
font-weight:500;
font-family: 'Pacifico';
}
#media only screen and (max-width: 699px) {
/* putting the grid columns count in the media call on the #wrapper NOT the .masonry inner div */
#wrapper {
/* column-count: 1; */
grid-template-columns:1fr;
}
}
#media only screen and (min-width: 700px) {
/* putting the grid columns count in the media call on the #wrapper NOT the .masonry inner div */
#wrapper {
/* column-count: 2; */
grid-template-columns:1fr 1fr;
}
}
updated fiddle: https://jsfiddle.net/0gtvj652/2/
fabulous website: https://gridbyexample.com/examples/example1/