This is happening for WooCommerce product galleries. I've eliminated all other CSS from the site's theme and plugin, but I'm still not able to scroll suing my mousewheel. Using my mouse to click and drag the scrollbar works, but I want it to work with the mousewheel as well.
Below is the CSS, you can see the issue here:
https://wysostage.wpengine.com/product/short-sleeve-unisex-t-shirt/
HTML:
<ol class="flex-control-nav flex-control-thumbs">
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-heather-deep-teal-front-61941bc1b72b5-100x100.jpg" class="flex-active" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-black-heather-front-61941bc1b8452-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-red-front-61941bc1b8828-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-forest-front-61941bc1b8e64-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-true-royal-front-61941bc1b98ad-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-berry-front-61941bc1bac7a-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-kelly-front-61941bc1bc715-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-heather-prism-lilac-front-61941bc1be235-100x100.jpg" draggable="false"></li>
<li><img src="/wp-content/uploads/unisex-staple-t-shirt-heather-prism-mint-front-61941bc1c00aa-100x100.jpg" draggable="false"></li>
</ol>
CSS:
.woocommerce div.product div.images .flex-control-thumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: auto;
background: #f6f6f6;
}
.woocommerce div.product div.images .flex-control-thumbs li {
padding: 5px 5px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
margin: 0 !important;
clear: none !important;
}
Related
I want to be able align my text such that it's above the image in an unordered list.
This styling is not quite right though because if I resize the window down to a particular point, the images aren't going to be directly below the respective text. When the window is sized down, I end up getting the text below each other followed by the images which. What should I be doing to get the image directly below it's respective text regardless of window sizing?
.items>li {
display: inline-block;
padding: 0 30px 0 30px;
}
.itemImages>li {
display: inline-block;
padding: 0 30px 0 30px;
}
<ul class="items">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul class="itemImages">
<li><img src="img1.jpg"></li>
<li><img src="img1.jpg"></li>
<li><img src="img1.jpg"></li>
</ul>
If you wrap them in another element, you can use display: table properties.
.parent {
display: table;
}
.parent > ul {
display: table-row;
}
.parent > ul > li {
display: table-cell;
padding: 0 30px 0 30px;
}
img {
max-width: 100px;
}
<div class="parent">
<ul class="items">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul class="itemImages">
<li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
<li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
<li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
</ul>
</div>
But if you can put the text and image in the same element, that's what you should do, rather than having 2 lists.
li {
display: inline-block;
padding: 0 30px;
text-align: center;
}
img {
display: block;
max-width: 100px;
}
<ul>
<li>item1<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
<li>item2<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
<li>item3<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
</ul>
I have a Wordpress menu that I've made the tabs background images. I am trying to get the images to scale down when the .wrapper scales down and keep them in a horizontal row and avoid javascript and/or media queries or navwalker class as I'm using bootstrap.
This is what the menu looks like full scale:
Here is my code for my .wrapper and for a one out of the 9 menu-items and the nav class and logo structure. Please note I'm trying to apply the same concept to the logo.
I am using html5blank and Wordpress menu.
<div class="nav" role="navigation">
<?php html5blank_nav(); ?>
</div>
here is the html it renders of one of the 9 <li>'s ( that I'm styling in the css )
<li id="menu-item-1688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1688">Blog</li>
.wrapper {
max-width:1280px;
width:95%;
margin:0 auto;
position:relative;
}
.logo {
float:left;
width:145px;
height:157px;
}
.nav {
float:left;
padding-top:11px;
}
.nav ul {
padding:0;
margin:0;
}
.nav ul li {
float:left;
list-style-type:none;
padding:0;
margin:0;
}
li#menu-item-1688 a {
display:block;
background:url('img/ksl_news.png');
background-repeat:no-repeat;
width:110px;
height:119px;
color:transparent;
margin-top:27px;
}
You can use a quirk of the padding property to do this: the values for padding-top/padding-bottom when specified as percentages are calculated based on the width of the element (this also applies for margins).
Minimal example:
a {
background: url('http://i.stack.imgur.com/4kaLj.png');
background-size: contain;
display: block;
padding-top: 12.6324%;
}
The 12.6324% comes from the aspect ratio of your image: height/width*100 = 310/2454*100 = 12.6324%.
display: block; causes the element to take 100% width of it's container. Together, this solves your problem, as long as you know the aspect ratio of your images so you can calculate these percentages, this will work.
Jsfiddle example.
So here's an odd approach to this - using display: table in order to avoid needing to know the number of menu items you'll have. It's not quite perfect - as the images can sometimes be a pixel off in size, but if this works for you then great :)
HTML:
<div class="container">
<nav class="nav">
<ul>
<li class="logo"><img src="//placehold.it/145x157" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
</ul>
</nav>
</div>
CSS:
.nav {
display: table;
width: 100%;
}
.nav ul {
display: table-row;
}
.nav li {
list-style: none;
padding: 0px;
margin: 0px;
display: table-cell;
vertical-align: bottom;
}
.nav img {
max-width: 100%;
border: solid 1px #000;
}
JSFiddle Example.
However if the slight difference in cell size is a problem for you (it is quite noticable), but you are happy to have a hard-coded requirement in css of the number of items in your menu, try using the same markup with the followng CSS instead:
.nav ul {
margin: 0px;
padding: 0px;
font-size: 0px;
}
.nav li {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: bottom;
max-width: 9%;
}
.nav li.logo {
max-width: 11%;
}
.nav img {
max-width: 100%;
border: solid 1px #000;
}
Jsfiddle example.
Can't seem to get this working - i have a group of images with text under them set to :block , when i try to get the ul or li class containing the images and the a class , i'm unable to get anything i've tried to work. I want to keep images and text under the image centered regardless of page width.
Set up jsfiddle here http://jsfiddle.net/89bnF/488/
HTML
<li class="single">
<ul>
<li><img src=""><a>Top Dawg</a></li>
<li><img src=""><a>THEEOhiostate</a></li>
<li><img src=""><a>slambodians</a></li>
<li><img src=""><a>Hollywood Shuffler</a></li>
<li><img src=""><a>Thunderbolts</a></li>
<li><img src=""><a>MeWantee</a></li>
<li><img src=""><a>Cincy Slammers</a></li>
<li><img src=""><a>Mahafaha</a></li>
<li><img src=""><a>SF Drug Lords</a></li>
<li><img src=""><a>Hudy Delight</a></li>
<li><img src=""><a>long shot</a></li>
<li><img src=""><a>Green Guy</a></li>
</ul>
</li>
CSS
.single ul {
text-align: justify;
border: 1px solid red;
}
.single li {
display: inline-block;
position: relative;
top: 1.2em;
}
.single ul:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em;
}
.single ul:after {
content: '';
display: inline-block;
width: 100%;
}
img {
width:100px;
height:30px;
background:black;
}
If you remove the position:relative and introduce the margin: 0 auto; it should centre the <li>
.single li {
display: inline-block;
top: 1.2em;
margin: 0 auto;
}
Tryign to get it so that I have a max width for an image to be 308px and when the browser is scaled larger then the list will have more items per row. Just now it seems stuck at 3 list items per row but if I would like it to be fully reponsive and if the browser is scaled to minum it can be then it will be one image per row.
html
<ul>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
</ul>
css
ul{
position:relative;
float:left;
width:100%;
height:100%;
margin:45px 0 0;
}
ul li{
width: 33.3333%;
float:left;
}
ul li img{
display: block;
height: auto;
width: 100%;
}
JSFIDDLE
You need to use media queries.
Just set up media queries for each "breakpoint" and change the li width.
For example:
/* Show one image on devices under 540px */
#media screen and (max-width: 540px) {
ul li{
width: 100%;
float:left;
}
}
/* Show three images on devices between 550 and 800px wide */
#media screen and (min-width: 540px) and (max-width: 800px) {
ul li{
width: 33.333%;
float:left;
}
}
/* Show five images on devices between 800px and 1180pxwide */
#media screen and (min-width: 800px) and (max-width: 1180px) {
ul li{
width: 20%;
float:left;
}
}
http://jsfiddle.net/spacebeers/gfjDk/3/
Use media queries (as per SpaceBeers' suggestion) coupled with a min-width property on the list items...
JsFiddle
Another idea would be to use display: inline-block; instead of float: left and set max-width: 308px; and min-width: 100px; for the list items.
demo
HTML:
<ul>
<li><img src="image.jpg"></li><!--
--><li><img src="image.jpg"></li><!-- as many more list items as you need
-->
</ul>
The way I've written it (with comments between list items) does serve a purpose - any kind of whitespace matters when using inline-block.
CSS:
ul {
padding: 0;
margin: 45px 0 0;
}
ul li{
min-width: 100px;
width: 33.3333%;
max-width: 308px;
display: inline-block;
}
ul li img{
display: block;
height: auto;
width: 100%;
}
I'm trying to display a number of images horizontally inside of a fixed-width div. I would like to use a horizontal scroll bar to display the images which do not fit inside the div.
However, the images are displaying vertically, rather than horizontally. Is there a way to force them to display side-by-side?
div#event {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
div#event ul { list-style: none; }
div#event img {
width: 100px;
float: left;
}
<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>
Correct code for arbitrary number of images, if you don't know ul width:
#lasteventimg {width:150px;overflow-x:scroll;overflow-y:hidden;}
ul {list-style:none; display:block;white-space:nowrap;}
li {width: 100px;display:inline;}
<div id="lasteventimg">
<ul>
<li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
<li><img src="./gfx/gallery/image4.jpg" /></li>
<li><img src="./gfx/gallery/image5.jpg" /></li>
</ul>
</div>
You will have to display the list items inline or float them and give the ul a very large width to avoid items moving to the next line:
ul {
width: 10000px; // for example
white-space: nowrap;
}
li {
float: left:
// or
display: inline;
}
I'd go with
div#lasteventimg ul li {
display: inline;
}
To make sure the li elements aren't rendered as block elements.
Well first of all, you need to change your styles from #event to #lasteventimg. Then, if you set the width of the ul to be wide enough to accommodate all the images, you should see the behavior that you're trying to get:
div#lasteventimg {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
div#lasteventimg ul { list-style: none; width: 300px; }
div#lasteventimg img {
width: 100px;
float: left;
}
<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>
You need to change your list, so the elements are rendered horizontally rather then the default vertical.
#imagelist li
{
display: inline;
list-style-type: none;
}
Why don't you try this?
ul
{
width: 10000px;
white-space: nowrap;
}
li
{
display: block;
float:left;
}