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.
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'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
in my Drupal site, some black, empty space is being displayed at the bottom of the page, like in the image below..
By googling, I understood, it is because not enough minimum content in the page. but did not get proper solution to fix it, except min-width setting in global (style.css) file, but it is displaying unnecessary scroll bars even a page has one row of data when you set that property.
Could any body suggest me a solution to this problem
Surely just add the right background colour to your body tag in your css?
in your style.css add
body {
background: #f4f5e5;
}
I am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/
It has worked well with the exception of 2 things:
When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.
More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.
Is there something I'm missing?
I was able to fix it by doing the following:
1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;
2.) Removing the padding-top: 20px from the div itself
3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.
As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.
please set your content box central_container Flexible (percentages) its better for view in any devices then try to set footer as #mash's answer . ;) ( margin-bottom:0; )