I'm new to using flexbox and I'm trying to create a portfolio page that has several different widths, heights and a slideshow in there as well. I just can't seem to get the images to stay the same height when resizing the page. The slideshow / largest image in the bottom section of the portfolio keeps decreasing in height. I need the height of the images to stay proportionate to one another regardless of the screen size. Just wondering what I am missing here. I've included the URL, rather than markup and recreating in jsfiddle.
http://keaadvertising.com/new/kea-advertising-portfolio.php
/* Portfolio */
.portfolio { margin: 0 auto; overflow: hidden; padding: 1.5em .5em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.portfolio li {
padding: 0 .5em;
}
.portfolio li img { height: auto; }
.bottomPortfolio { padding-top: 0; }
.portfolio li .splitPortfolio li { padding: 0; }
.portfolio li .splitPortfolio li:first-of-type { padding: 0 0 .7em; }
.bottomPortfolio .firstPortfolio { flex: 1 1 15% }
.bottomPortfolio .secondPortfolio {flex: 1 1 16%; }
.bottomPortfolio .thirdPortfolio { flex: 3 3 49%; }
.bottomPortfolio .fourthPortfolio { flex: 1 1 16%; }
Try this adjustment:
.portfolio li img {
height: auto;
width: 100%; /* NEW */
}
Decided to try out widths for each bottom portfolio and it seemed to have resolve
.portfolio { margin: 0 auto; overflow: hidden; padding: 1.5em .5em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.portfolio li {
padding: 0 .25%
}
.portfolio li img { height: auto; width: 100%; }
.bottomPortfolio { padding-top: 0; }
.portfolio li .splitPortfolio li { padding: 0; }
.portfolio li .splitPortfolio li:first-of-type { padding: 0 0 .7em; }
.bottomPortfolio .firstPortfolio { width: 16.08%; }
.bottomPortfolio .secondPortfolio { width: 16.78%; }
.bottomPortfolio .thirdPortfolio { width: 50.82%; }
.bottomPortfolio .fourthPortfolio { width: 16.2%; }
Try adding a min-height that will make sure images don't reduce in height past a certain value.
So something like:
.potfolio li img {
height: auto;
min-height: 200px;
}
This should make it to where the image will size up infinitely, but will only size down to 200px.
Related
So I have this middle container (div) which consists of 2 smaller div.
Here's the code for the div that wraps both div:
.midContainer{
width: 100%;
height: 30vh;
max-height: 700px;
display: flex;
flex-wrap: wrap;
overflow: auto;
justify-content: space-between;
margin-bottom: 15px;
}
Here's the code for left div:
.tokenInfoBox{
width: 60%;
height: 100%;
max-height: 700px;
// padding: 20px 30px ;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
Here's the code for right div:
.ticketBox{
width: 40%;
height : 100%;
background-color: #0e0304;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
}
Have this added as well:
#media only screen and (max-width: 1060px) {
.tokenInfoBox, .ticketBox {
width: 100%;
}
}
So the content for the left div and right div (both div) display normally in big screen but overflow and overlap div below them in small screen. How do I wrap all the overflow content inside the div?
Here's the image in bigger screen and here's the image in smaller screen where I have to scroll to see all content.
CSS:
.midContainer {
width: 100%;
height: 30vh;
display: flex;
flex-wrap: wrap;
}
.tokenInfoBox {
flex: 1 1 25rem;
height: 100%;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
.ticketBox {
flex: 1 1 8rem;
height: 100%;
background-color: #0e0304;
border-radius: 0 10px 10px 0;
}
you can use flex in this case when applying flex-wrap.
If i understood well, the problem is because you have set the height of the .midContainer, try something like this:
.midContainer {
display: flex;
width: 100%;
align-self: flex-start;
}
.tokenInfoBox {
width: 60%;
flex-grow: 1;
display: flex;
flex-direction: column;
background: #1b1b1c;
}
.ticketBox {
flex-grow: 1;
display: flex;
flex-direction: column;
background: #0e0304;
width: 40%;
}
this will grow you div to fit the amount of height needed.
Also think about the use of media queries, small devices would be difficult to read 2 divs side by side, maybe should be better one over another
#media (max-width: 768px) {
.midContainer {
flex-direction: column;
}
.tokenInfoBox {
width: 100%;
}
.ticketBox {
width: 100%;
}
}
also I strongly recommend to use tailwind
I am creating a website and trying to get the best css setup (responsive/works on all browsers) for creating a section where an image is either right or left of a block of text. I heard that flex was the best way to go, so I tried mimicking other websites that use a flex setup. So far I have a chunk of code that works for when the image is to the right, and the text is to the left....but it doesn't work for when image is to the left, and the text is to the right.
Here's my code: https://codepen.io/7harrypotterrr/pen/MZEdVY
.containerabcolumn {margin: 0 auto !important;}
As you can see, when I reverse the orders of div a and b, the results are bad. On my actual site, there's actually no overlap, but theres an issue with how the image overflows. When the window size is shrunk down for the first section of code, things works as intended...the image to the right goes beyond its div container and cuts off more and more as the window size is shrunk (that's good)....however for the second section of code where the image is to the left and text right, the image ends up overlapping the text...instead of going beyond its container to the left (the way I want it to).
Any ideas how to fix?
Thanks in advance for any help I get, and as you can tell from the way I tried to describe my issue, I am a complete noob at coding.
Also, if anyone have thoughts as to whether this set of code is responsive/works on all browsers/generally a smart approach, that would be great too.
You ask for the right approach so I will give two answers. Answer 1 answers your request. Answer 2 is a more elegant and professional solution that - with the same css - is able to display two views, optimized depending on the target screen
Solution 1: respecting your intention also on mobile
in order to have both the problems solved
this fix the text over the image, as per the other answer:
.b img {
width: 100%;
}
removing flex: 0 0 auto; makes fixes the text cut on mobile:
.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
}
This is a simulation on a Pixel2 XL after the two css modifications
Solution 2: best UX
The preceding solution mimics the dynamics of a desktop screen. But on a mobile you want to see better the text and the image. This doesn't happen with the preceding solution. So my suggestion is to go with this css. You will preserve the same layout you want on desktop screens BUT you will reorganize the things much better when you open the page on mobile
<style>
.containerabc {
background-color: #fff;
display: block;
overflow: hidden;
width: 100%;
}
.containerabcolumn {
margin: 0 auto !important;
max-width: 1080px;
float: none !important;
position: static !important;
}
.containerabc .et_pb_text {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
}
.b {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 50%;
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: auto;
flex-basis: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.b img {
width: 100%;
}
#media only screen and (max-width: 600px)
{
.containerabc .et_pb_text
{
display: block;
}
.a
{
margin: unset;
max-width: 100%;
padding: 20px;
}
.b
{
max-width: 100%;
padding: 20px;
}
}
</style>
Desktop behavior
Mobile behavior
Update after OP clarification
.containerabc {
background-color: #fff;
display: block;
overflow: hidden;
width: 100%;
}
.containerabcolumn {
margin: 0 auto !important;
max-width: 1080px;
float: none !important;
position: static !important;
}
.containerabc .et_pb_text {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
display: inline-block;
position: relative;
top: 0px;
left: 50px;
padding-left: 30px;
padding-right: 30px;
padding-top: 100px;
padding-bottom: 150px;
background: white;
}
.b {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 50%;
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: auto;
flex-basis: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.b img {
width: 100%;
min-width: 700px;
position: relative;
overflow: hidden;
}
#media only screen and (max-width: 600px)
{
.containerabc .et_pb_text
{
display: block;
}
.a
{
margin: unset;
max-width: 100%;
padding: 20px;
position: unset;
}
.b
{
max-width: 100%;
padding: 20px;
}
.b img
{
width: 100%;
min-width: unset;
}
}
You simply need to define 'width: 100%;' to your image inside div. Something like:
.b img {
max-width: 700px;
width: 100%;
}
I have tried to emulate the excellent flexbox tutorials by Wes Bos. I wanted to convert one specific tutorial he has on responsive flexbox menu. But I wanted my menu to be done with mobile first so I did my media queries with min-width.
But I am not able to make it work properly on the default mobile layout. In the menu created by Wes, the li items are stacked upon each other and the social icons at the bottom have flex:1 1 25%. But my social icons are also stacked.
On the other breakpoints my layout follows the one that Wes created.
I have set up a codepen for my code.
.flex-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.flex-nav .social {
flex: 1 1 25%;
}
#media all and (min-width:500px) {
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav ul {
flex-wrap: wrap;
flex-direction: row;
}
.flex-nav ul {
border: 1px solid black;
}
}
#media all and (min-width:800px) {
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
}
This is your default code (no media queries applied):
.flex-nav ul {
display: flex;
flex-direction: column;
}
.flex-nav .social {
flex: 1 1 25%;
}
Yes, you've given each social media icon a flex-basis: 25%.
BUT, your container is flex-direction: column.
So the flex rule applied to your social media icons works vertically, not horizontally.
Consider this method instead:
.flex-nav ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: 0 0 100%; /* sized to fit one item per row */
}
.flex-nav .social {
flex: 0 0 25%; /* sized to fit four items per row */
}
revised demo
I've created a container for the social links so it's more easy (at least for me) structure the menu.
SEE IN CODEPEN
Here the html:
<div class="wrapper">
<nav class="flex-nav">
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
<li>item04</li>
<li>item05</li>
<li>item06</li>
<div class="social-container">
<li class="social"><i class="fa fa-gift"></i></li>
<li class="social"><i class=" fa fa-glass"></i></li>
<li class="social"><i class=" fa fa-calendar"></i></li>
<li class="social"><i class=" fa fa-cutlery"></i></li>
</div>
</ul>
</nav>
</div>
CSS:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
}
a {
color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition: all 0.5s;
}
a:hover {
background: rgba(0, 0, 0, 0.3);
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 50px;
}
.flex-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%; /* ADDED */
}
.flex-nav .social {
flex: 1 1 25%;
}
.social-container { //just make it flex container
display: flex;
width: 100%;
}
#media all and (min-width:500px) {
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav ul {
flex-wrap: wrap;
flex-direction: row;
}
.flex-nav ul {
border: 1px solid black;
}
}
#media all and (min-width:800px) {
.flex-nav li {
flex: 1;
}
.flex-nav .social {
/*flex: 1;*/
}
.social-container {
flex: 2; /* set the value as many as you want */
}
.flex-nav ul { //change the direction
flex-direction: row;
flex-wrap: no-wrap;
}
}
I was wondering if there was a way to change the position of a navigation bar in mobile view by only using CSS3. For example instead of having the navigation bar underneath the top container in mobile view, I would like to have it fixed above the top container. I am using a wordpress theme, Thanks in advanced.
The website is www.capcar.com.au
You may try "transform" property with media rule.
Add css :
#media only screen and (max-width: 767px) {
.navigation_menu {
background: none repeat scroll 0 0 #ffffff;
position: absolute;
top: 0;
width: 100%;
}
.header_section {
background-color: #ffffff;
color: #99ca00;
padding-top: 51px;
width: 100%;
}
}
Flexbox can solve this issue pretty easily. Just add display: flex and flex-direction to #wrapper. Then, inside of a media query, add order: 0 to .header_section and order: -1 to .navigation_menu. This will switch those two around, but leave everything else in the order it was before.
You should be able to just add this to your css:
#wrapper {
display: flex;
flex-direction: column;
}
#media only screen and (max-width:640px) {
.header_section {
order: 0;
}
.navigation_menu {
order: -1;
}
}
var el = document.getElementById("toggle");
el.addEventListener("click", function(){
var menu = document.getElementById('menu');
menu.classList.toggle("show")
}, false);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: flex;
flex-direction: column;
}
header,
nav ul {
display: flex;
max-width: 800px;
width: 100%;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
padding: 1rem 2rem;
}
header {
margin-bottom: 1rem;
}
#logo {
width: 40%;
}
.awards {
display: flex;
align-items: flex-end;
width: 40%
}
#award1 {
width: 25%
}
#award2 {
width: 75%;
}
nav {
background: linear-gradient(to bottom, #e3f5ab 0%, #99ca00 100%);
display: flex;
flex-direction: column;
min-height: 3rem;
}
#toggle {
display: none;
align-self: flex-end;
background: transparent;
border: none;
width: 2rem;
height: 2rem;
margin: .5rem 1rem;
outline: none;
cursor: pointer;
}
nav ul {
list-style: none;
padding: 0 2rem;
}
li {
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
width: 20%;
text-align: center;
}
li a {
display: block;
height: 3rem;
line-height: 3rem;
width: 100%;
text-decoration: none;
color: #02006d;
}
li:hover {
background-color: #ffffff;
}
.caret {
font-size: .6rem;
}
#media screen and (max-width:700px) {
#logo {
width: 70%;
display: block;
margin: 0 auto;
}
#award1 {
display: none;
}
#award2 {
display: none;
}
header {
order: 0;
display: block;
}
nav {
order: -1;
}
#toggle {
display: block;
}
#toggle img {
width: 100%;
}
nav ul {
display: none;
}
nav ul.show {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
width: 100vw;
}
}
<div id="wrapper">
<header>
<img id="logo" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/LOGO-FOR-WEB23.png" />
<div class="awards">
<img id="award1" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/HIA_Logo1.png" alt="" />
<img id="award2" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/MBA_Logo.png" alt="" />
</div>
</header>
<nav>
<button id="toggle"><img src="http://www.tax-consulting-group-san-diego.com/images/taxes-menu-icon.png" alt="" /></button>
<ul id="menu">
<li>Home</li>
<li>About Us</li>
<li>Projects <span class="caret">▼</span></li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
A simple clean demo, and a demo with your site (codepen doesn't like your site, so the header looks weird, but I can't get all the css to load properly—hence the simple demo).
For more info on flexbox here's a snippet from css-tricks and the support tables.
Hope this helps!
Try using the flex property to build your menus. I have great success with this feature and it allows for a number of simple order methods via CSS and media queries. Try CSS-Tricks.com as a reference
I try to make a responsive website which looks similar in Chrome, IE(11), and FF.
My problem in IE is, that if the site is too long the scrollbar doesn't scroll to the end because of the sticky page-footer('page-footer'). I tried to give my page-main-area a margin or padding bottom but that doesn't change anything.
Another thing is that my sidebar background doesn't fill to the end.
CSS extract:
.page-sidebar {
padding: 10px;
border-top: 2px solid #000;
background-color: #00BB9C;
width: 100%;
padding-bottom: 58px;
}
.page-sidebar h3 {
color: black;
}
.page-sidebar h3:first-child {
margin-top: 0;
}
.page {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.page-main-area {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 8px;
background-color: #000;
color: #fff;
max-height: 50px;
}
HTML + CSS:
http://jsfiddle.net/mvz8rq1o/2/
What can i do to fix this in IE?
margin-bottom: on page-sidebar should get the full sidebar showing. (won't fix the fill-to-bottom however...)