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;
}
Related
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.
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}
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.
My <footer> tag will not seem to stay at the bottom of my page. I have tried several different techniques to fix it and none have worked.
I have included the link to my working site below.
http://stage.bmdigitalgroup.com/recipes.html
i think you want to put your footer at bottom of the page i any resolution, if am i right than here is answer.
.footer {
position:absolute;
border:0px;
}
for more tips, tricks and tutorial visit - blog.klassicweb.com
Based on your screenshot, it looks like your monitor's height is larger than your website's content or you have zoomed out a lot, so what you're seeing is totally normal. In a smaller monitor it would look just fine. You could add a min-height: rule to your sites container so it pushes the footer down to the specified value, but you need to figure out a min-height that makes sense to you and your users.
If you really want to make the footer always stick to the bottom regardless of the monitor's height or zoom level, then you could add the following rules - just keep in mind that in a page where there isn't much content, you will end up forcing users to scroll down for no reason if they need to get to the footer:
/*
This rule is already in your stylesheet.
I added it here just for reference.
*/
html, body {
height: 100%;
}
/*
This is the container that holds your whole site.
You should use an id like "#container" or "#site" so this rule
applies only to your site's main container.
*/
.container_12 {
min-height: 100%;
}