I have this shop https://ergonomus.co/tienda/
and as you can see, the grid breaks.
It must be a css related issue, but I can't figure it out.
I fixed it adding
/* Flexbox on WooCommerce archive products */
.woocommerce .products ul,
.woocommerce ul.products {
display: flex;
flex-flow: row wrap;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
display: flex;
flex-flow: column nowrap;
}
.woocommerce ul.products li.product .button {
margin-top: auto;
display: table;
}
but still the grid has a blank margin on the right....i dont get it
Related
I am currently creating some pages as part of the Free Code Camp CSS challenges.
For some reason my tags are not properly centering once I collapse the grid upon the #media activation. They keep slightly drifting to the right side.
The link for the complete pen is here:
https://codepen.io/alioshr/pen/KKPBPMr
I have already tried using inline-block display, justify-self to center, etc.
<html>
<header id="header">
<figure>
<img id="header-img"src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
</figure>
<div>
<h1>Doce Meliponicultura</h1>
<p>Reconnect with Mother-nature</p>
</div>
<nav id="nav-bar">
<ul>
<li>Top Features</li>
<li>Products</li>
<li>Social</li>
</ul>
</nav>
</header>
</html>
<style>
a {text-decoration: none; display: inline-block;}
#header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
background: gold;
align-items: center;
justify-self: center;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 99;
}
#media (max-width: 600px) {
#header {grid-template-areas: "title" "logo" "nav-bar";}
#header > figure {grid-area: logo;}
#header > div {grid-area: title;}
#header > nav {grid-area: nav-bar;}
}
#header > figure {
justify-self: start;
align-self: center;
display: relative;
max-height: 140px;
}
#media (max-width: 600px) {
#header > figure {
justify-self: center;
}
}
#header > nav {
justify-self: end;
}
#media (max-width: 600px) {
#header > nav {
justify-self: center;
}
}
</style>
You can add below CSS in your #media (max-width: 600px)
#header > nav > ul{
padding: 0px;
}
It will fix your issue.
I'll add my answer as well, to give a bit more info about Flexbox set up. Basically I removed all the CSS Grid syntax in favor of Flexbox. I'm not sure what exactly you're going for, but this will give you an idea of how to get it working at a minimum.
#header {
display: flex;
background: gold;
align-items: center;
justify-content: space-around;
width: 100%;
}
#media (max-width: 600px) {
#header {
flex-direction: column;
}
}
#header>figure {
justify-self: flex-start;
align-self: center;
max-height: 140px;
}
#media (max-width: 600px) {
#header>figure {
justify-self: center;
}
}
#header>nav {
justify-self: flex-end;
}
#media (max-width: 600px) {
#header>nav {
justify-self: center;
}
}
Here is my working fiddle (the codepen link you supplied never loaded for me).
Here is a really great resource on learning what all the Flexbox rules do, etc
A Complete Guide to Flexbox
I am trying to apply media queries to my website, however nothing is changing.
I have tried changing the position of my media query in the CSS flow, but no joy.
here is the specific part of the code:
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
I would like to replace the desktop header with a simplified mobile header that just displays images rather than the text. Currently, nothing is changing at all. Everything seems sound in the html, so I can only think I am leaving something out of the CSS?
Thank you for your help in advance!
I found nothing wrong with your code. It's absolutely fine! May be there are other conflicting code that bars your code from displaying as you intended.
Here I added some HTML and it's working fine with your code.
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
<div class="desktop-header">
<h1>Desktop Header</h1>
</div>
<div class="mobile-header">
<h1>Mobile Header</h1>
</div>
use these media queries and follow at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
I cannot get these thumbnail images to stack horizontally and clear the text here:
http://svgcuts.com/blog/2016/04/09/fairy-cottage-svg-kit/
I can add a float:left to the line:
191 .entry .ngg-galleryoverview .ngg-gallery-thumbnail img {float: left;}
But the text below keeps wrapping around the containers.
If you inspect ngg-galleryoverview in developer tools you'll see it has collapsed when you float it's children. (aka: it no longer stretches to contain them.) The quickest way to fix this if you'd like to float the children is adding:
.ngg-galleryoverview {
overflow: hidden;
}
.ngg-gallery-thumbnail-box {
float: left;
}
Assuming this is your website, you can use flexbox to achieve what you want.
I noticed the wrapper for the thumbnails and came up with the code:
.entry .ngg-galleryoverview {
padding: 0px !important;
margin: -15px 0px 30px 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Notice that I just added:
display: flex;
flex-direction: row;
flex-wrap: wrap;
It works well for me:
I have this stylus mixin:
display()
display: (-ms-)arguments
display: (-webkit-)arguments
display: arguments
Which is generating this in CSS:
.nav ul li a {
display: -ms- flex;
display: -webkit- flex;
display: flex;
}
However what I want to achieve:
.nav ul li a {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
How I can achieve this with Stylus?
Can you just use it like this since this is a special occasion for displaying as flex?
display()
display: -ms-flex
display: -webkit-flex
display: flex
.nav ul li a
display()
Or even rename it to displayFlex() so you always know what it is about.
This is what I expect (tested in Chrome and Firefox):
This is how it looks in Safari Version 9.0.2 (11601.3.9)
Quick jsfiddle to show you an example:
https://jsfiddle.net/qbozL26m/1/
CSS:
.container {
padding-top: 20px;
}
.equal-height {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
//align-items: center;
//
.well {
width: 100%;
}
}
Edit:
Gif och Chrome-behaviour (correct)
Gif of Safari behaviour (incorrect)
Edit 2:
I've come up with a solution to fix it for safari, it's not that good though because it overrides bootstraps column sizes.
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
flex-basis: 33%;
}