I have issue on my Woocommerce site. Main image on some products are not alligned properly making mess with title. See problem bellow:
I tryed old method to set images width and height , and after that regenerate thumbnails, but seems do not work in Woocommerce 3.3.X. Can someone to tell me how to fix this, or give me some instructions how to?
This is CSS i think that control that part..
.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none
}
You are setting different heights which is causing some items to align incorrectly.
.product_cat-tops .et_shop_image {
height: 360px !important; }
.product_cat-jurken .et_shop_image {
height: 320px; }
You have lots of different heights in your CSS set: https://jsfiddle.net/Lwmjseaj/
If you set both of these to the same height, the captions will line up nicely :-)
Related
I've tried a bunch of ways to remove this margin on the right of the YouTube Livestream page.
I'm doing this for an extension I'm working on and I'd like the margin to be removed completely from page.
I've already done the following:
margin: 0px !important;
It removed the margin on the left side of the page, but there's still a big chunk of margin on the right side and I have no idea how I should remove it.
Any help would be much appreciated.
The other margin spacing is actually on the elements directly inside #columns, which is #primary & #secondary. Overiding those extends width to the window edges.
div#columns {
max-width: 100%!important;
}
div#primary {
margin: 0!important;
padding: 0!important;
}
div#secondary {
padding: 0!important;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
}
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I tried my best but I couldn't make the following theme full width/screen by editing the CSS. And Single post wider so embedded video will be more width and height same as youtube video width and height? I'd be very much grateful if you could show me or give me a hint regarding this customization.
https://www.happythemes.com/demo/?theme=videonow
I'm using above theme on this website. http://nepvideo.com
You see the footer in the above theme(It's full width), how do I make the whole theme's body/container full width like the footer?
Note: I tried adding/removing margins/paddings etc.
If I understand correctly, you have to change to following
on line 896
/* Site Content */
.site-content {
width: 100%; /*max-width: 1000px; */
margin: 20px auto;
}
and on line 909 add max-width: 100px; and margin: 0 auto
/*--------------------------------------------------------------
# Featured Content
--------------------------------------------------------------*/
#featured-content {
background-color: #fff;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
I have a Wordpress site with some galleries with quadrangular photos but I want them to be rectangular to users see the entire photo. I changed the values (height in particular) but when I do that the image stretches and I can't find the way to resolve that problem. I'm still a little newbie in CSS so anyone can help me? It's seems to be a easy thing but unfortunately I can't do.
Here is the gallery: http://cp58.webserver.pt/~httpfash/kids/
All the images have the same size.
Some of the code:
bootstrap-light.min.css
.img-responsive {display:block;max-width:100%;height:242px}
.models li a img {
width:100%;
I used firebug to find that.
.models li a img {
width: 100%;
height: auto !important;
}
Always use height auto for responsive images
img {
width: 100%;
height: auto !important;
}
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!