I am working on an online store using WordPress and woocommerce plugin. I had an issue with resizing the images. So I decided to force the images inside the shop page using additional CSS to show as following:
.products ul li.product .btWooShopLoopItemInner .bt_bb_image img, ul.products li.product .btWooShopLoopItemInner
.bt_bb_image img{
display: block;
max-width:250px;
max-height:250px;
width: auto;
height: auto;
}
It worked fine for forcing images to show with my specified width and height, but the issue now is if I place any image bigger than the height and width above, it shows as a zoomed-in picture it doesn't show fully.
I tried to zoom out the picture using scaling but it reduced the whole container's size. Any idea of showing the picture fully without getting automatically zoomed in, and without resizing the original picture?
I found the answer. WooCommerce automatically crops the image (instead of zooming into it). In order to disable the cropping image option:
Go to Appearance > WooCommerce.
Click on Product images.
Choose Uncropped.
The image will fully appear inside the product container with the specified dimensions, assuming you specify any using CSS.
Related
My shop page back-end is using WooCommerce + elementor.
The cart page is boxed to avoid a messy layout look on larger screens:
the top section is stretched to full width:
Issue:
The woo notice that appears when you update your cart quantity or remove an item from the cart appears as a boxed view (as it coincides with the width of the "cart" section - which is set to boxed- 1200px)
How can I have "just the woo notice set to full width (no matter the screen size) without needing to make my whole shop page full width?
*I tried to set the wrapper to (width: 100vw), but no luck
video sample: https://streamable.com/euksnx
Thank you for your help.
after looking into your website, I noticed where the issue lays. The .woocommerce-message has a width of 100vw. This is why it sticks out of the parent. If you simply remove this, it will show as expected.
If this is styling you didn't apply and can't remove, overwrite it in your child theme with the following class
.woocommerce-notices-wrapper .woocommerce-message {
width: 100%;
}
As this is WordPress and sometimes your CSS doesn't want to overwrite, you can always resort to using !important for width. However, I think it's better if you try to see if it will work without it.
Image with 100VW what it is now:
Image with 100% class
To stretch the banner full width as requested in the comments, add the following CSS:
.woocommerce-notices-wrapper .woocommerce-message {
margin-left: calc(50% - 50vw);
width: 100vw;
}
the manufacturer logo on the product details page of Shopware6 constantly changes its position depending on how big the logo of the manufacturer is. We have now trimmed the logos so that they no longer have a white border. The logos of the manufacturers are of course always different sizes so that they are never flush with the product title.
We want the logo to be flush with the product title, no matter how big the logo is. How can we force Shopware6 to do this?
EDIT:
I´m using this but the top seems changing depending on the size of the manufacturer-logo:
.product-detail-manufacturer {
margin-top: -125px;
}
For a pure CSS solution you could add custom styling or use a plugin and set the items of the detail headline to be aligned at the top:
.product-detail-headline {
align-items: start !important;
}
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
I have installed one plugin under my woocommerce store in order to show appropriate icon awards for wines. When I add image icon which shows in top left corner of woocommerce thing images, and look website on mobile website the image looks disorder and like its squeezed and stretched. If you take a look at website home page http://letmewine.com/ and product "FRANCIACORTA BRUT “ALMA” BELLAVISTA" from mobile phone you will see what I mean. I tried assigning z-index value position to absolute or relative to that image icon and nothing happend. I could use any suggestion what to do here.
Thanks a lot for help
The problem is that your image is absolute and have set width:100%, height:100% which makes is stretched. It's because the images is trying to fill the the entire holder which is actually bigger than image size.
You should change your style.css on line 11739 where is the selector for the image ( .post_featured img ) and change so your code will become:
.post_featured img {
width: auto;
height: auto;
}
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.