Div moves on top of div on some screen sizes - html

On a specific range of screen sizes (in the low 1000s), I have a content div that will move over a navigation div completely. It's as if both divs begin at the top of the page.
Here is the HTML:
<body id="about">
<div class="topnav" id="myTopnav">
Home
About
Contact
</div>
<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>
Here is the relevant CSS:
#media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
Why would the row div move on top of the myTopnav div?

You have given your #myTopnav an absolute position. This takes it out of the flow of page.
It means you must handle spacing other elements so they do not to overlap the absolutely positioned ones.
In your case, you need to give your row class a margin that matches the height of #myTopnav element.
Since row is a class that is probably used in many places, you should probably add a new css class and use that to set the spacing. e.g.
<div class="row with-spacing">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
CSS:
#media screen and (min-width: 993px) {
.row.with-spacing {
margin-top:50px;
}
}

Related

Bottom of flex item is cut off when stacked in column

(Edit) Please view the codepen here.
I am making a card stack with Vue.js and flex box to display various apps on my website. I use a component for each card and use Vues' for function to render cards with the following template html:
<div class="card">
<img src="">
<h1>Title</h1>
<a>Click</a>
</div>
This component is called "app-card". I render the cards within the following HTML:
<div id="app">
<div class="row">
<div id="card-container">
<app-card> <!--Above HTML from template goes here--> </app-card>
</div>
<div id="main"></div>
</div>
</div>
I use the following SASS (CSS without the { } in this case) for my card deck:
*
margin: 0
padding: 0
font-family: 'Montserrat', sans-serif !important
box-sizing: border-box
.row
display: flex
flex-wrap: wrap
justify-content: space-evenly
align-items: auto
#card-container
flex: 10%
#main
flex: 90%
.card
width: 100%
margin-top: 0;
margin-bottom: auto;
.card img
width: 100%
max-width: 100%
.card a
padding: 10px
background: blue
However the top of the next card in the deck cuts of the bottom of the button of the above card as shown in this image:
How would I go about fixing this? I've just started learning flex-box after having used Bootstrap-4 for years.
You can fix this by adding margin-bottom property in card class.
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif !important;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: auto;
}
#card-container {
flex: 10%;
}
#main {
flex: 90%;
}
.card {
width: 100%;
margin-bottom: 50px; /* Add Margin Bottom */
}
/* For last card no margin bottom */
.card:last-child{
margin-bottom:0;
}
.card img {
width: 100%;
max-width: 100%;
}
.card a {
padding: 10px;
background: blue;
}
<div class="row">
<div id="card-container">
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
</div>
<div id="main">
</div>
</div>
.card a {
padding: 10px;
background: blue;
display:block;
}

RESPONSIVE IMAGE ON RIGHT SIDE

Im trying to position my image on the right side of my screen and my text on the left, but make the image responsive as i resize my browser.
#fmap{
position: absolute;
right: 0%;
margin-right: 0;
display:block;
margin:10px;
width: 100%;
height: auto;
border: 12px double #d3d3d3;
max-width:850px;
}
<div class="maptext" id="facilitymap">
<p><a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/#52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="" id="fmap" >
</a>
</p>
</div>
Here is one way using flexbox on the parent div;
.container {
/*this makes the parent container into a flex container*/
/*divs within this parent container become responsive flex items*/
display: flex;
}
.left {
padding: 20px;
}
#facilitymap {
width: 100%;
}
img {
width: 100%;
}
#media screen and (max-width: 600px) {
.container {
/*switch to column view when screen is 600px or smaller*/
flex-direction: column;
}
}
<div class="container">
<div class="left">
<p>left side text</p>
</div>
<div class="maptext" id="facilitymap">
<a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/#52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
<img src="https://cdn.pixabay.com/photo/2020/07/27/14/34/stars-5442598__340.jpg" alt="" id="fmap">
</a>
</div>
</div>

Resizing image within flexbox layout

I have a pay layout which works how I want to when using the .slides element has a background colour and height, it flexes as expected, however when I switch to filling it with an image this behaviour breaks as the images won't resize and I can't get my head around how to make them resize.
The idea is the left column of text remains fixed size, and the right column flexes up and down, eventually snapping under the left column at small sizes.
The reason for using an <img> and not a background image is because there is a image slide show that I want to put in here.
Can anyone help fix this issue?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-wrap: wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Changes made:
Enabled responsiveness for img elements
Commented out the flex-wrap: wrap
Set #media queries to define when the wrapping inside the .container div takes place
body {
margin: 1em;
}
p {
margin: 0;
}
img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontally responsive */
max-height: 100vh; /* vertically responsive */
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
/*flex-wrap: wrap;*/
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
#media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
.container {flex-wrap: wrap}
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Do you mean something like this ?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-flow:row wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex:1 0 15em;
min-width: 15em;
max-width:800px;
}
.slides {
display:flex;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800" />
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>

Float Right Inside A CSS-Table Cell

I've a question regarding a layout I'm making. I want to make a simple horizontal navigation menu and I'm starting out with this:
https://jsfiddle.net/74596pc8/
However, when I try to float the menu inside the 2 column to the right the margins of the first get all messed up, like this:
https://jsfiddle.net/33pf48u2/2/
HTML:
<div class="top-bar">
<div class="grid">
<div class="row">
<div class="col3">
LOGO
</div>
<div class="col9">
<nav class="right" style="height:55px;">
<div class="menu"><ul><li class="page_item page-item-2">Sample Page</li></ul></div>
</nav>
</div>
</div>
</div>
</div>
<div class="home-bar">
<div class="grid">
<div class="row">
</div>
</div>
</div>
<div class="home-posts">
<div class="grid">
</div>
</div>
Grid:
.grid {
margin:0 auto;
max-width: 1200px;}
#media (min-width: 600px) {
.row {
display: table-row;
width: 100%;
table-layout: fixed; }
.col {
display: table-cell; }
/* .row-padded {
margin-left: -1rem;
margin-right: -1rem; }
.row-padded .row {
border-spacing: 1rem 0; } } */
#media (min-width: 600px) {
.col1 {
display: table-cell;
width: 8.333333%; }
....
The Applied CSS:
/* Nav Menu
---------------------------------------*/
html ul,li{
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.right{
float:right;
}
Please advise on why this is and how to fix it :)
thanks in advance.
Instead of using float right you can use text align: right property, it will give you the same result.
.right {
text-align: right;
}

Container with max-width won't wrap inline-block children when resized

I have this code:
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
DEMO
The container won't wrap around its elements when media query gets activated. The same thing happens with floated children (which is normal, I guess).
Demo
one option is to add an "inner" wrapper; just a wrapper within your wrapper. you can make it display inline-block and set text-align center on the parent wrapper. Finally, remove the grey background from the wrapper and apply to the inner wrapper.
just one drawback is that when you make the window really small the .col divs are not lined up on the left. not sure if that's an issue for you
html
<section class="wrapper clearfix">
<div class='inner-wrap'>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</div>
</section>
css
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.inner-wrap {
display: inline-block;
background: grey;
}
.wrapper {
text-align: center;
max-width: 500px;
margin: 0 auto;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}