so I have a landing jsx page which is currently made up for 2 components, a main page and an About page, these pages have been placed inside a container which uses flexbox to align them vertically. While the content int the About page works as it should (for now its just an svg), when i decrease the vertical screen size, it covers and hides the content that overflows from the main page, when i set overflow to hidden the content is just not visible, but then its not set to hidden the svg from the About page overlaps the content from the main page, when instead i wanted the main page content to resize itself to fit the viewport height of the mobile device. Any suggestions?
.main-slim{
color:#F86666;
background-repeat: no-repeat;
background-size: cover;
width:100vw;height:100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Here, the main slim className refers to the mobile view for the main page.
.about-mobile-container{
height:100vh;
.line-graphic-scroll{
//position:fixed;
top:0;
left:0;
width:100%;
height:100%;
text-align: center;
//overflow: hidden;
}
svg{
display: inline-block;
height: 100%;
}
}
And here is the full scss file for the About page, which overlaps the main page when the screen height gets small.
return(
<>
<div className='absolute-container'>
<div className='main-slim'>
//content in main slim
</div>
<div className='about-mobile-container'>
//content in about container
</div>
</div>
</>
)
And here is a representation (not the actual code) of the landing.jsx script that renders the two pages. They are contained in the 'absolute-container' and are in a flexbox set to column.
Well, you could use #media query (https://www.w3schools.com/css/css3_mediaqueries.asp) to have a different style for differently-sized devices.
Related
I have an assignment where I need to fit an image and header into a div with a fixed width that changes heights every time. It needs to look like the screenshot below, but I have no idea how to get that look.
The sections are where the flexbox starts and I organized the child elements to appear like they should, but everything inside of that, I can't get to work.
HTML
<main class="card-grid">
<section class="row-grid"></section>
<section class="col-grid">
<div class="card" style="width: 200px; height: 280px;">
<img src="littlecolorado.jpg">
<h2>Another card</h2></div>
</section>
</main>
CSS
.col-grid {
display: flex;
flex-flow: column wrap;
gap: 20px;
height: 2000px;
}
.col-grid div img {
width: 200px;
}
.col-grid div h2 {
display: block;
}
My file:
What it should look like:
Just setting the height of the image to 100% should do it. That means the image will take up 100% of the available space. If you want more direct control of the growth and shrinking of the children use flex-shrink and flex-grow.
https://codepen.io/gallagher7788/pen/bGLRGLx
https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
Note: height:100%;width:100% will distort your image, but thats how the example you included did it. You could create a div with a background image and use background-size:cover to crop the image.
I am currently in training and to carry out a common thread project, I would like to stand out from my comrades who use a responsive navbar which displays a burger menu with a "hidden" menu which is displayed as a footer after reducing the window. (which only appears from a specific dimension)
For example the website https://www.parcasterix.fr/
I've been racking my brains for 3 days and I haven't found
Thank you
Start with the basics, make a container and use a nice natural HTML markup.
Naturally, elements are in display:block, this makes them following the page size. You can make them display:inline-block, so they stay on the same line, but will always follow the flow, and show their content.
No need to go complicated, at least on the beginning. But even after.
.container {
resize: both;
overflow: auto;
width: 80%;
height: 140px;
}
div {
border: 1px black solid;
display: inline-block;
padding: 10px; /* Just to make it nicer */
}
<div class="container">
<!-- Insert your content here and try to resize with the handle on the
bottom right corner -->
<div>Some content</div>
<div>And some more. Hey did you notice?</div>
<div>Elements are just following the flow!</div>
</div>
This is a simplified version, but assuming I've understood you correctly, you can do this simply with a CSS #media query. Hide the footer normally, show it when the screen size is small enough:
/* footer is hidden by default */
footer {
display: none;
}
#media(max-width:400px) {
footer {
display: block;
}
}
Once the screen width is over 400px, the footer will be hidden
I'm trying to set up a scrolling gallery, but not sure how to proceed.
The following is what I'm looking for (see attached as well):
15-20 images with different sizes
Define spacing between the images (pink areas)
The container to be the specific height on certain breakpoints (desktop, tablet, mobile), and then which the images will adapt to in order to keep their ratios and layout according to my attached example.
Scroll from right to left and start over once the last image is being shown, so it starts over smooth.
I'm thinking the following, but don't know how to make the images adopt the right way depending on screen size?
.container{
display: flex;
position: relative;
max-height: 700px;
height: 100%;
width: 100%;
overflow-x: hidden;
}
.image{
display: block;
position: absolute;
}
I've encountered a problem while coding my website row by row. For specifying products I have made small slideshows for every one of them, but I have a hard time centering the images vertically due to some pictures are standing and some are laying down. I use "text-align: center" for horisontall centering, but since the pictures heights varies I've been trying to use js.
Here's how far I've come trying to code a script that calculates the top-padding depending on how high the image is:
function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2);
}
290 is the maximum height, so 290-s is what's left over, and then divided by 2 for the same space over and under.. You get the idea, this isn't working though.
Help pls
You can center an element vertically using a combination of display: flex; align-items: center; on the parent element. There are other techniques covered here https://www.w3.org/Style/Examples/007/center.en.html
img {
max-height: 50vh;
}
div {
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
I have a div 100% of the screen height, top of the DIV is a table...Idea being then white space with a image at the bottom of the DIV. When I add the image it appears directly under the table, as opposed to the bottom of the page. How can I fix this? I have tried many things from searching in google...
display:block
margin:0 auto;
bototm:0px
but no joy, does anyone have any ideas? thanks
Add position: relative to parent div then add position: absolute; bottom:0px; to the image. This works in most cases but your could be different since you haven't posted the full code. Ps you have a typo bottom
Codepen http://codepen.io/noobskie/pen/epEPYw
Flexbox is one way of doing it: http://codepen.io/zvona/pen/BodqBY
HTML:
<div>
<img src='...' />
</div>
CSS:
div {
display: flex;
flex-direction: row;
}
img {
align-self: flex-end;
}