Try:
`.article-container .round-div {
border: 94px solid #ffffff;
}
thanks very much but that didnt do anything other than slightly changing the way it expands, still a grey box on mobile devices, but white on desktop
do I need to delete the code I put in and replace with yours or just add yours below mine?
Well I tried both ways, all it did was to make it round, I need it square. Either way the article container is whit on desktop but grey on mobile.
Sorry I should add that I am a newbie, this is my first ever web site so sometimes I don’t understand where to put stuff in the code
The page I used to test this was http://natureheals.co.uk/?s=reflex. I used the search box to get it as I couldn’t see the effect anywhere else.
It has a grey surround appear at the Bootstrap breakpoint of 979/980px.
My code is more ‘specific‘ and fixes Post thumbnails.
Where are you putting the code? Try the Custom CSS panel to start with which would give you an immediate fix to test. Ideally, you should set up a Child Theme and add the code in the style.css.
I have the site running in a child theme. I have put your code in both the Custom CSS panel and into the child style.css (not at the same time)
The grey surround does not appear in the desktop version on Chrome but when I perform the same search on iOS7 the pictures do have the grey surround. Essentially, I want the surround to be white on all devices so it blends in with the whit website background…
When you ask ‘where are you putting the code?’ do you mean the code you suggested or the code in my OP?
Thanks a lot
Both really, but if you’re using the Child Theme then should be OK.
Try
.article-container .round-div {
border: 94px solid red;
}
This will prove we’re looking at the right element.
OK, I’ve appended your code to the child theme’s style.css file. No change at all (at least not at what I am looking at) . Results from search still display background white on desktop and grey on mobile devices.
Thank you for taking your time to look at this rdellconsulting – it is very much appreciated.
Your style.css isn’t being picked up for some reason.
Can you go to Customize>Skin and UNCHECK the minified CSS checkbox.
Go to http://pastebin.com/ and paste a copy of your style.css there. it will give you a url which you can leave here so I can see your code.
I use minify with w3 total cache for performance reason so I’d rather not disable minify.
Here is the code – I’ve used a few snippets from the Customizr support site.
http://pastebin.com/guKsGULK#
By the way, does the style.css contain the stuff that’s in the theme’s custom CSS sidebar?
P.S. I have removed your code as it wasn’t doing anything, not a fan of leaving stale stuff around as I Am confused enough as it is with HTML and CSS 🙂
If all you need to do is change the colour and the round->square, then you don’t need everything you have above. You just need:
.round-div {
border-color: #FFFFFF;
border-radius: 0;
}
If you only want to affect the front featured circles, you will have more success if you use .widget-front .round-div, because this has higher specificity.
But there’s a media query complicating things too. Unfortunately, the colour has also been set for other screen sizes (@nikeo this could be removed; only the sizes need to change, not the colour/type of border), so you will also need to change it in the relevant media queries.
So you will need:
.widget-front .round-div {
border-color: #FFFFFF;
border-radius: 0;
}
@media (max-width: 979px) {
.widget-front .round-div {
border-color: #FFFFFF;
}
}
If you want it to apply to your blog, then you can also add the .article-container selector as Dave suggested above, but that might not be specific enough either and you might need to resort to adding !important if you want to simply get the job done.
The specificity link above is worth taking time to understand. It took me a while to get my head around it, but you begin to understand why things don’t work once you’ve understood it.
I’ve never got on with the Minify option in W3TC, but I can now see that the style.css code is being processed.
I want to see my code above being picked up:
.article-container .round-div {
border: 94px solid red;
}
Can you add it towards the beginning of style.css, after the body() styling. What I’ve seen as grey should be showing as red.
You’ve never confirmed that the page I referenced is the one causing you headaches?
Hi ElectricFeet, Thanks for taking The time to reply.
Your reply is going straight over my grad i Will need to read it several times and research more.
However, to summarize, this is what I need done:
I want any featured images , be it on the front page, in the search results or blog to be:
1. Square
2. Keep the zoom effect
3. Have a white background, not grey, for all devices, as I have change the background in all site features to white only this one eludes me.
The image background is white on my desktop browser currently which showse that I have done some coding correctly bit when viewing on my iPhone it is grey.
Basically I need a code snippet that will cover all eventualities and some explanation if I can rove some code I already have with the new code to be applied.
Many thanks to all for replying.
