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;
}
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;
}
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.
I'm building a webpage for a client that I inherited from another developer. The link is: http://up8.431.myftpupload.com/. The client would like the phone number and the social icons in the top bar to display in the same style across all devices:desktop, tablet, and mobile. She doesn't like how when the display gets small enough the phone number and social icons stack on top of each other. That's fine but if there's no room to display them left and right but if there is, she would like to keep the same style. Problem is, I can't figure out how to make that happen.
Upon inspecting the element, I notice that each block has a width of auto, or whatever it needs to fit in. I've tried giving each block a display:inline rule in the hopes that they would take on the content width and align left to right and then I can just float the social icons to the right.
Tried something like this:
#top-bar-content, #top-bar-social
{
display:inline;
}
AND
.top-bar-left, #top-bar-right
{
display:inline;
}
What I hoped would happen is both blocks would display inline, back to back and I could just float them left and right respectively. What actually happened is the phone numbers changed its width to fit the content and floated itself to the left exactly how i wanted it to. The social block however, did not. It lost its dimensions; upon inspecting the element I find its width and height are 0x0. It remained in the same spot. Like I said, in my head I expected it to adopt its content width and sit right next to the phone number.
I'm sure this is just a noob error and I'm just not seeing what's in front of me. I really appreciate any help in advance.
I would change the parent div that contains both the number and social icons to display:flex. Then add justify-content:space-evenly or space-around or space-between (experiment between them) to the same parent element.
So you will have to use a media query to apply this for mobile devices only. When this is applied on desktop devices there is some interference from other classes and "::after" pesudo code.
#top-bar-inner {
position: relative;
display: flex;
justify-content: space-evenly;
}
This will do the trick
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;
}
I've been trying to figure out how to remove the side spacing (on both left and right) of a page. For instance, I'll have a photo that should span the width of the page, but for some reason wordpress automatically adds in a buffer.
Thank you.
Add this css-
#wrapper div.centered-wrapper {
width: 95% !important; // reduce the % to increase the spacing.
}
This will effect only the content on the page not the menu. The menu wil take style from what you have changed in style.css.