I am trying to make a section of a page (About us) where the picture takes up 1/3 of the screen and the writing takes up the other 2/3rd of the space in a screen of height- 91vh. However, the image is getting super enlarged when I am trying to do it and the writing comes below it.
About.js
return (
<div id="about" className="style-about">
<div className="style-picture">
<img src={picture1}></img>
</div>
<div className="style-info">
<h1 className="style-about-heading"> About Us. </h1>
<div className="style-paragraph-container">
...//Content
</div>
</div>
</div>
)
}
about.css
.style-about {
background-color:#b2c5b2;
min-height: 91vh;
display: flex;
flex-wrap: wrap;
}
.style-picture {
flex: 1;
}
.style-info {
flex: 2;
padding-left: 20px;
}
Related
I have 3 image tiles (Image and Description) within a div element. I have used a flexbox such that all the 3 tiles are shown side by side in a row in full screen view. But when shown in a smaller screen, I want 2 of the tiles to be in the first row and the third tile to start a new second row. I tried it by giving the tile width 33% in the full screen case and width 50% in the smaller screen view but it isn't working mostly because I've made some mistake.
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<style>
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
}
</style>
I cant quite figure out what to write in the media screen function such that in small screen view there are 2 tiles in upper row and the third div tile of container moves to another row below it. Please help me out with the CSS.
Set flex-wrap: wrap so the flex container will wrap at break points and then you can set up a class to break the wrap in media query with flex-basis. Just add that class to the div with the tile selector.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile {
width: 50%;
}
.break {
display: flex;
flex-basis: 55%; /* Change to 100% if you want it to fill up entire area under two images on top */
}
<div class="container">
<div class="tile two">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile two">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile break">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
All you need to do is to add flex-wrap: wrap inside your container class.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
I'm trying to create the layout below using CSS Grid. However, my image and paragraph is not being positioned correctly.
When running my HTML and CSS:
There is some white space at the top of my image and
My paragraph is positioned at the very bottom
I believe the problem is with my image. Images have to maintain aspect ratio and its affecting my grid in unexpected ways.
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
h1, h2, p {
grid-column: 1;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<h2>Subtitle</h2>
<h1>Title</h1>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
<p>Just some paragraph text...</p>
</div>
Looks like you are trying to do multiple things at once. That won't work.
At first, wrap around your first column into another element. So the last thing is only to figure out positioning inside the first column.
.grid {
display: grid;
}
.first-column {
grid-column: 1;
}
.first-column-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<div class="first-column">
<div class="first-column-content">
<div class="header">
<h2>Subtitle</h2>
<h1>Title</h1>
</div>
<div class="footer">
<p>Just some paragraph text...</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
</div>
I'm trying to create the following basic layout:
And I'm currently using the following basic HTML markup (with slightly different class names and additional markup within each of the HTML elements):
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">
</div>
<div class="purpleSection">
</div>
<div class="pinkSection">
</div>
<div class="redSection">
</div>
</div>
<div class="rightOrangeStrip">
</div>
</div>
</div>
<div class="lightPurpleContent">
</div>
</div>
And then the following starting CSS for the markup above:
.sidebar {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: 0;
width: 300px;
}
.topGreenStrip {
height: 5px;
justify-self: flex-start;
}
.sidebarContainer {
flex-grow: 1;
justify-self: stretch;
}
The problem I'm having though is that because I start by stretching everything vertically with flexbox, I don't know how to then stretch things horizontally but still keep everything 100% the height of the screen.
That is, minus the 5px green top strip, I want the rest of the sidebar to occupy 100% the height of the screen. The large pink section should fill in whatever the brown, purple and red sections don't naturally.
I was able to get that part working without the orange bar by using justify-self: flex-start;, justify-self: stretch; and justify-self: flex-end;. However, once I add the orange bar in, I don't know how to keep doing what I'm doing.
The orange bar has a bit of dynamic content in it, so I can't set a static width, and the brown, purple, pink and red sections should use whatever width is not taken up by the orange bar (I'm assuming with flex-grow: 1;).
Anyway, how do I get this layout where (within the sidebar), I'm trying to stretch things both to 100% the height and 100% the width? Can I do this with just flexbox, or am I going to have to used positioned/floated elements to get this all to work?
Sorry for the vagueness, but after trying several things and getting nowhere close, I'm not sure where to begin. Thank you.
You need to make use of flex-direction: column on certain elements to stack the children. Also, using flex: 1 will force that element to grow and fill available space in it's parent.
By setting height: 100% on the html and body you can stretch .siteContainer to be the full height of the window.
I've added the background colours so you can see the layout in action.
html,
body {
margin: 0;
height: 100%;
}
.siteContainer {
display: flex;
height: 100%;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
}
.topGreenStrip {
height: 5px;
}
.sidebarContainer {
flex: 1;
display: flex;
}
.sidebarInnerContainer {
display: flex;
flex-direction: column;
flex: 1;
}
.pinkSection,
.lightPurpleContent {
flex: 1;
}
.topGreenStrip { background: green; }
.brownSection { background: peru; }
.purpleSection { background: darkviolet ; }
.pinkSection { background: pink; }
.redSection { background: red; }
.rightOrangeStrip { background: orange; }
.lightPurpleContent { background: lavender; }
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">green
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">brown
</div>
<div class="purpleSection">purple
</div>
<div class="pinkSection">pink
</div>
<div class="redSection">red
</div>
</div>
<div class="rightOrangeStrip">orange
</div>
</div>
</div>
<div class="lightPurpleContent">lightpurple
</div>
</div>
I have an React application and having a slightly bigger problem with some CSS stuff.
I have an view which is divided in 2 parts. But those two parts are lying in one bigger component. The left part is displaying some contacts and on the right I want to display details of those contacts. Now I want to make the left part scrollable like a list, but the right part just stay fixed on its position. Also the height of the left part should always stay as high as the current screen size. I am using Bulma CSS as my base CSS framework.
This is my HTML:
<div class="pane main-content" id="mainPane">
<div class="contacts-view">
<h1 class="title">My Title</h1>
<div class="">Other Stuff</div>
<div class="columns">
<div class="column is-3">
<div class="columns is-multiline">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
<div class="column is-9"></div>
</div>
</div>
</div>
This is a quick sketch of how it looks:
Current relevant CSS:
.main-content {
background-color: #fff;
padding: 20px;
}
.pane {
position: relative;
overflow-y: auto;
flex: 1;
}
.columns {
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
}
.column {
display: block;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
For better explanation. The component with class column is-3 should be scrollable but all other parts should stay fixed with no scroll.
I tried:
.is-3
overflow:hidden;
overflow-y:scroll;
But I found out that I have to set the height of is-3 because otherwise my screen is just expanded to the bottom. But I can not set a fixed height to it, because my screen size is dynamic and depended on the size of #mainPane. But I can also not set it to 100% because then the screen is also expanded at the bottom. Do you have any suggestions how I can solve this with CSS ?
Thanks in advance :)
You can use flexbox layout.
jsFiddle
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background: lightblue;
}
.content {
flex: 1;
display: flex;
min-height: 0; /*ADDED 2021*/
}
.sidebar {
background: lightgreen;
overflow: auto;
}
.main {
flex: 1;
background: pink;
overflow: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">
<div class="sidebar">
<div style="height:200vh;">sidebar</div>
</div>
<div class="main">
<div style="height:200vh;">main</div>
</div>
</div>
</div>
I am using Bootstrap frame work and Wordpress. My site brings in two different kinds of posts
html - post type 1 - image on the right
<section class="row row-eq-height">
<div class="col-md-6">
<div class="section-content">
... content ...
</div>
</div>
</div>
<div class="col-md-6 section-img">
... image that takes up full column space ...
</div>
</section>
html - post type 2 - image on the left
<section class="row row-eq-height">
<div class="col-md-6 section-img">
... image that takes up full column space ...
</div>
<div class="col-md-6">
<div class="section-content">
... content ...
</div>
</div>
</div>
</section>
css
.row-eq-height {
position: relative;
display: flex;
min-height: 400px;
}
.row-eq-height .col-md-6,
.row-eq-height .col-md-12 {
flex: 1;
display: flex;
align-items: center;
}
.section-content {
position: relative;
flex: 1;
text-align: center;
}
#media screen and (max-width: 768px) {
.section-content {
position: absolute;
z-index: 10;
right: 0; left: 0;
margin: 0 auto;
padding: 25px;
}
.section-img { min-height: 400px; }
.row-eq-height { display: block; }
.row-eq-height .col-md-6,
.row-eq-height .col-md-12 {
flex: 1;
display: block;
}
}
The goal is the columns in each post overlap (content column over-top image column) when the screen is 768px. The post type 1 (image on the right) works fine. The post type 2 (image on the left) the text content goes underneath the image column.
I tried using push and pull classes with no success