Blurry and low quality Images

Morniiing Irina

we need to change css code little bit, something like this:

.page-id-9811 .gallery-item img {
width: 33%;
float: left;
}

Good evening my dear friend. How are you? That is the code we’re already using:

.page-id-9811 .gallery-item img {
width: 33%;
float: left;
}
The only difference is that I added
margin-left: 2px;
margin-top: 2px;
so the images have a space between and the gallery look centered at the page.

Even if I remove that it stills not displaying the columns:

But at the most of galleries the code is working like a charm :D. I have no idea what is happening with those, maybe the page ID a the explorer ir wrong? A ghost one? LOLOL. Just a thought.

A lot of kisses for you. The menu is back.

Oh I see it has an A in the other code hahahaha, sorry I was without glasses. Doing the changes now sorry my dear.

YEAHHHHHH! It is working FOR ALL OF THEM, removed the a. Now just need the captions back hahaha.

Good morning

Im so happy you found it yourself :slight_smile:
is there anything else for me?

Hallo, I hope your working is ine.

Well my gallery captions, they stay all at the botton of the gallery in the last row; they are all overlapping as you can see here. Sending you two attached files so you can see the difference. The first is from front page where I’m not using svg galleries and the second a svg gallery.

Have you heard of cloudflare? It really improves the website velocity?

A lots of kisses and hugs my hero friend. You rock!!!

Good morning Irina

So, there are other captions for images and they are concentrated as one? want confirmation is this a problem?
if yes then im afraid we need to make small changes in previous css codes too :frowning: but its possible to fix

Hallo dear, how are you?

Yes that’s it. All images have captions and they are being overlapped. Don’t worry take your time. I know you have to work.

I wish you a nice day full of good code :D.

Kisses and hugs

Good evening Irina :slight_smile:

i have a code for you, but unfortunately, we need to make small changes in previous codes too :frowning: this svg is doing

old code:
.page-id-9367 .gallery figure {
float: left;
display: contents;
}
.page-id-9367 .gallery figure {
float: left;
display: block;
position: relative;
}

old code:
.page-id-9367 .gallery-item img {
width: 33%;
float: left;
margin-left: 2px;
margin-top: 2px;
}
new code:
.page-id-9367 .gallery-item img {
width: 100%;
float: left;
margin-left: 2px;
margin-top: 2px;
}

and this new code:

.gallery-columns-3 .gallery-item {
width: 33%;
}

Let me know if you have anything else :slight_smile:

Hallo dear, I could not understand. I remove the other code, the old one and added the new one:

.page-id-12241 .gallery-item img {
width: 100%;
float: left;
margin-left: 2px;
margin-top: 2px;
}

.gallery-columns-3 .gallery-item {
width: 33%;
}

The page I’m using for test with the new code is like:

The images aren’t in columns again; the caption only appear for the last image and isn’t fixed.

How was your day dear?

Good morning Irina

Please enable the temporary link for me again and I will fix it for you :wink:

Hallo dear. Temporary link, it means your login? It should be enabled lolol. I give you 1 year I think. Gimme a
few minutes dear.

Good evening Irina,

Lets check it again :wink:
this is a final code:

.page-id-12241 .gallery figure {
float: left;
display: block;
position: relative;
}

.page-id-12241 .gallery-item img {
width: 100%;
float: left;
margin-left: 2px;
margin-top: 2px;
}

.gallery-columns-3 .gallery-item {
width: 33%;
}
.gallery-caption {
opacity:1;
}

Hallo! Good evening my friend. Already changed all galleries codes they are amazing.
I just don’t know how to work out the size of the captions from this gallery so they can fit the images.

There is anyway to discover what is making my website slow? People are saying that it more slower than ever… I really don’t know what else I can do. I need to find out what it causing it.

Kisses and more kisses. Marked the wordpress topic as solved.

Goood morning Iri :slight_smile:

  1. captions -

old code:
.gallery-caption {
opacity: 1;
margin-left: 2px;
}

new code:
.gallery-caption {
opacity: 1;
margin-left: 0px;
}

Old code:
.page-id-4462 .gallery-item img {
width: 100%;
float: left;
margin-left: 9px;
margin-top: 2px;
}

New code:
.page-id-4462 .gallery-item img {
width: 100%;
float: left;
margin-left: 0px;
margin-top: 0px;
}

speed - sizes of svg items you are using is really big, they are 3mb and more, of course loading such amount of data needs time, normal image size used on websites are 200-400kb

Hallo my amazing hero, how are you today? It is holiday in portugal.

Changed the code it is almost there, better than before, is missing a very small part for the caption cover all the image bottom but don’t worry about that dear.

THAT IS the thing with the svg they are like monsters lolol. I can reduce to maybe 2mb the biggest images. I’m searching has hard I can in the internet but not solutions at all.

There is anyway to list all my images in the website per size? So I can start working the reduce of the biggest to the lowerest?

I’ve installed cloudflare, the website is better and I’ll remove jetpack and back to the others plugins. Wordpress support says some of my problems with images not loading all at since (besides the size, MY SERVER, can be related to jetpack). What do you think about that? Jetpack?

Hope you’re having a nice day and cheering for you to finish your work (the one you most present at the weekend).

Hugs

Good morning :slight_smile:

“…cover all the image bottom but don’t worry about that dear.” - Hm, why :slight_smile: this is easy to fix, you just need to change caption position from absolute to a relative:

.gallery-caption {
position: relative
}

Well, i would not use images more than 1.5mb on the site, no matter they are SVGs, jpg or any other image file,
Second thing i spotted on your site is repeated CSS rules, i think you are saving CSS rules multiply times, they are in appearance > customize and they are appearance > editor and added in the style.css file, my suggestion is t move/merge all your css rules in style.css file

Thank you for warm wishes Irina, wish you best weekend too :slight_smile:

Already awake? I’m working, cutting off all my monster images hahaha. I will use at maximum images with 600kb. Following your advice just passing more 200kg hahaha.

BUT
How are you dear? You really wake up early every day.

Indeed I could merge it but how I do that? There is anyway to merge it without having to read all css lines? Any program? Software?

Thanks for the tip about the caption, changing it now. I wish you a very nice day. KISSES my dear hero.

Good evening

Sorry for late response it was because of weekends,
So, is its going on? i see some changes on the site :slight_smile:
Im fine thank you dear and hope you are fine as well :slight_smile:

Hallo my dear hero-friend. How was your weekend? Well I’m doing fine, don’t worry about the late answear. If only we could stay all day chating and the money just crediting hahahaha.

Yes! I followed your advice and changed all the images to smaller versions, but at pages with more images like I can’t make miracles. Even with the images 400kb there are a lot and adding up the size of all images, the page becomes heavy. The only solution is to remove them but they are my characters LOLOL.

I HAVE AN HUGE PROBLEM. Wordpress support said my social media boxes where making the site heavier and slower, so I removed the boxes from my footer widgets so they don’t stay at the bottom loading at all pages and put inside a page. BUT they say it is still loading from somewhere in all pages. I made a test at Page Speed Test - Check Your Website Loading Speed Online and it confirms that the boxes are being loaded always at all places.

Slowest Object

The code for the boxes is in my functions that is why they are being loaded even after I removed the boxes?

Kisses and a nice day dear