gscohier

Hehehe!
Thanks! I thought I was going mad since I’d never added that border thing in my stylesheet!
Just read the english one again line by line and couldn’t find it anywhere! ??

Deactivated plugins on both sites. Still no changes.

Only plugin difference is the WP Language one which is on the French side only.

Odd!

Here it is: https://fr.social-be.be/

I get you, the page source.
It tells me both files are identical.

What do you mean by source codes? where are those?

I’ve double checked the style sheets with that link you posted and the only differences it throws are the ones relating to the button in the nav bar which is expected.

I’ve sorted it for iPhone, I think.
Preview looks ok anyway. The only one which look a bit odd are iPad mini where the bottom borders are somehow much wider than the others…

That’s brilliant!
Adjusted it to left: 516px and it look great! ??

Thank you!

Smacks forehead!
That was such an obvious thing!

Thanks for the solution to something that’s been bugging me for aaaaaaaaaaaages! ??

I don’t believe you can do since they’re not icons as per say but a font called genericons

I’ve added the following to my css and it has sorted the issue on my Android but a screenshot from an iphone shows the issue remains on them…
Could anyone with a bit of knowledge check where I’ve gone wrong?

/* Responsive 4860-6953 and 8219-8502 */
@media screen and (max-width: 320px) {

}

@media screen and (min-width: 321px) and (max-width: 480px) {

}

@media screen and (max-width: 480px) {
.round-div {
left: -44px;
top: -44px;
}
.widget-front.hover .round-div, article.hover .round-div, .widget-front.focus .round-div, article.focus .round-div, .widget-front.active .round-div, article.active .round-div {
transform: scale(2.6);
-webkit-transform: scale(2.6);
}
.thumb-wrapper img {
right: 0;
max-width: 250px;
}
}

@media screen and (min-width: 481px) and (max-width: 767px) {
.round-div {
left: -44px;
top: -44px;
}
.widget-front.hover .round-div, article.hover .round-div {
transform: scale(2.6);
-webkit-transform: scale(2.6);
}
.thumb-wrapper img {
right: 0;
max-width: 250px;
}
}

@media screen and (min-width: 768px) and (max-width: 979px) {
.round-div {
left: -56px;
top: -56px;
}
.widget-front.hover .round-div, article.hover .round-div, .widget-front.focus .round-div, article.focus .round-div {
transform: scale(2.5);
-webkit-transform: scale(2.5);
}
.thumb-wrapper img {
right: 0;
}
}

@media screen and (max-width: 980px) {

}

@media screen and (min-width: 981px) and (max-width: 1024px) {

}

@media screen and (min-width: 1025px) and (max-width: 1169px) {

}

@media screen and (min-width: 1071px) and (max-width: 1200px) {

}

@media screen and (min-width: 1201px) and (max-width: 1366px) {

}

Bleugh! That’s mad since it’s sorted it on my Android.

I’ve got another thread opened for that.

I’ll post the codes see if anyone can find the issue…

Thanks for all the help and patience!
It’s my first WP site and I’d never heard of CSS before a month or so ago so it’s all very new! ??

Thanks, could I be cheeky and ask if the codes I’ve just added to get the featured areas’ picture sit in the middle of the boxes have worked?

Odd!
No, I don’t have access to an Iphone, I’m afraid.
Relying on web based tools and they all look the same.
Tried a couple of different ones and also cleared my cache just in case…

done but still not working… :-S

Really odd… it’s as if once the site shrinks, a few things in my css are ignored.
I’ve got issues with the featured areas (images don’t sit in the middle), the site tag line somehow ignores the colour changes and reverts back to the original blue and so on…

in the child stylesheet css.
is that not where they need to go?