I am stuck trying to get the header full width in the woocommerce pages of my website.In every other page its full width.There is an element style that gives width 90% and i cant seem to find how to change it.Anyone any ideas?Thanks
codes i used
#top-classic.header-style2.top.header-light.logo-dark{
max-width:100% !important;
}
.content.top.style-wireframe{
max-width:100% !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.
Halfway down this page is the "our team" section using the Wordpress plugin Huge-IT Portfolio: http://dev.doubleaevents.com/ . When I resize my browser to smaller sizes, each image rearranges but the div is not centered. I've tried auto left and right margins, and setting max widths, which seems to work when I inspect the element... but when I make the same changes in my style sheet I can't seem to get the whole div centered!
Ideas?
EDIT
Try adding this:
#media(max-width: 769px){#huge_it_portfolio_container_1{
margin: 0 30% !important;
}}
Clear your browser cache and reload maybe it'll solve the problem.
http://www.ebay.co.uk/itm/151785559320
Hi. So I've been messing around with my eBay listing page for the last couple of hours trying to solve this.
First of all I wanted to change the max height rather than the width, which I sorted with this code:
img.img-responsive.col-xs-12 {
width: auto !important;
max-height: 650px !important;
}
But then it was effecting my thumbnails, so I used this code to prevent it screwing my thumbnails up:
img.img-responsive.col-xs-12.img-thumbnail {
width: 100% !important;
max-height: auto !important;
}
Everything looks all right, except now my images align left instead of centre. Ever since I put the width to auto.
The thing is, I'm using WidgetChimp.com for the CSS generation, so I can only enter custom arbitrary code on top, not edit anything in the main CSS file generated on that eBay listing page.
Any help please.
NOTE: Before using the code in the first block, it was centering.
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.