I'm using the Wordpress plugin "Woocommerce".
I wasn't happy with the way that the standard four column layout of my products meant that they all became too small when the browser width became narrower, so I've tried to use media queries to turn them into a three column layout when the browser reaches -1250px.
There were a few issues with the margin css that the plugin uses, in the sense that it is preset to have a margin-right on all but the last product.
I've changed this to target the third item instead of the fourth by using
.woocommerce-page ul.products li.product:nth-child(3n+3) {
margin-right: 0px;
}
I then fixed the fourth by adding the right margin, giving it the default margin value of margin: 0 3.8% 2.992em 0; initially set by the plugin.
But for some reason the items after the third one are floating all over the place and I'm not sure why.
Can any body tell me what might be causing this and how I can fix it?
An example page that shows this problem is: http://www.lucieaverillphotography.co.uk/product-category/prints/
This happened to me. If you look at the css, woocommerce assigns a class of 'last' to the last item (or, li) in a row, and 'first' to the first item.
When you resize the window and change to a 3-item structure, what was the last item becomes the first.
You need to target those classes, maybe removing their properties at specific breakpoints, or altogether. You can start by trying to remove clear properties for .first and .last.
Related
I'm using elementor for the first time and I can't remove the space between widgets, you can see the small line of 8px in gray colour with a gradient inside (thats my picture). When I put this picture Elementor adds the white space above and below the line, I thought this is added only at desing time but when I update and see in the browser the whites spaces continues here. Of course the picture in the media gallery don't have this white spaces... I don't know what to try, the only trick is to force the margins but then when the screen changes it's overlapped (this is not a solution). I think Elementor should place the picture without nay margin, only the picture. I have the next properties set:
Content: Full Width
Elementor Widgets Space: 0px
Columns Gap: no gap
All margins and paddings: none (0px)
Tried height to default and forced to 8px
I have two ideas that might help you:
check for a border, maybe you set it on accident or it got imported
take a look at your custom css. Sometimes plugins like envato elements add their custom css without you noticing
It's also a good idea to use your browser and inspect the element to find out if there is any gap. You can also try that on the elements next to the widget you are using.
I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
I have tried everything within my repetoire to fix this. I fall on my knees with open hands!
You can view a draft of the page here:
www.barrettcv.com/draft_so.html
If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour
Main problem.
The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.
Secondary problem.
When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries
It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:
...user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport...
I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.
.row {
position: relative;
}
/* apply to the details column */
.push-9 {
position: absolute;
left: 75%;
}
Example: http://bootply.com/92096
What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).
So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.
Guys
I am having hard time tweaking a CSS part of the menu.
I have a website here at http://aaron.wordpresstiger.com where the last title "CONTACT" of the menu comes up with a line ahead and doesn't fits the menu. though i was successful in getting the "HOME" first menu item correctly fitting the menu but not the last one.
Can you please tell me what CSS i should add to fix this MENU problem. Also, please have a look i need the last item of the menu to be showing as same css as the first one (HOME).
I need the menu's items to look similar to the one here:
http://officialfacebooklikes.com/index.html (have a look at the last "CONTACT" which fits the menu correctly).
I look forward to hearing back for HELP :)
Regards
Muzammil Rafiq
in your css you will want to add two styles
#access li {
width: 25%;
}
#access li:last-of-type, li#menu-item-31{
border-right: none !important;
width:24% !important;
}
the first will make each menu element 1 quarter of the width... the second removes the right border on the last element and re-sizes it to fit properly on one line of the navigation bar.
the !important tags may not be necessary but they will ensure this works on the first go.
Well, if you want to create a horizontal menu you should float the list items. But as I can see from your example website you want the list items to be even in width, so you need to put those list item into containers, determing the width for each list container and float those. Also text-align center your a tags.
Good Luck!
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.