stellamaris5

by the way this is your snippet to make it Square:) I’m sure you know this ??

here we go:

https://pastebin.com/UBAFF80v

thanks so much!!

cheers that helped a lot! I am learning ??

Thanks Dave, not quite right, I have put back the first part and it is back to square one…I will live with it for now until I can find an easy solution.

When I put the whole code in , the pictures just go over the the text on the page and look all weird.

this looks weird now

https://natureheals.co.uk/?s=karla

In addition to my code below?

.round-div {
border: 104px solid #FFFFFF;
border-radius: 0px;
display: block;
height: 170px;
left: -54px;
position: absolute;
top: -66px;
transition: all 0.3s ease 0s;
width: 170px;
z-index: 99;
}

OK added the previous code and no change, it is white on desktop , grey on mobile

And most importably the pictures are round again and not square and they expand outside the container

do i need to remove the previous code i put in under ‘body’?

Dave, I have done this now as requested.

Background still white on desktop, grey on mobile.

I understand, I have disabled to FP images on the frontage on purpose as I am planning to do something else there.
But is is the same issue when I enable them, white on desktop, grey on mobile. They are the same images that come up anywhere on the site.

I am confused as well ??

P.S> I have now temporarily enabled FP images on the Front page, you will see that ‘containers’ are white on a desktop browser but grey in mobile ( i can’t test on android as i don’t have access) – this is iOS7

P.P.S. Actually, just cleared the cache and they are grey on my desktop as well ( the frontpage one)

Dave, will do this a bit later. It is not a specific page that is doing this. Any search that brings up a page excerpt with a featured image is doing this. I.e. Looks good on desktop but grey in mobile browser.

Ps I know I need to put better images on as they are not all the exact size as specified in the spec.

Dave, will do this a bit later. It is not a specific page that is doing this. Any search that brings up a page excerpt with a featured image is doing this. I.e. Looks good on desktop but grey in mobile browser.

Ps I know I need to put better images on as they are not all the exact size as specified in the spec.

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.

you need to go into the page editor and add a featured image for each of the pages that is on the front 3.
It is good practice to add one to each page anyway and tag it properly for SEO reasons (i think :))

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.
https://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 ??

Thank you for taking your time to look at this rdellconsulting – it is very much appreciated.