Blog thumbnail looks bad - object-position?
Hey guys, beginner here, I am trying to fix my blog thumbnails on https://expertphotoshop.ro/ and I tried object-fit, object-position but I really can't manage. I'm trying to make the image fit nicer inside the square. I guess "cover" is what I'm looking for, but I tried a lot of things in inspector and I can't manage. Help?
Cristian Barin - Expert Photoshop - Cursuri Photoshop
Curs Photoshop - Instructor Photoshop Certificat de Adobe - Cristia...
Cel mai bun curs Photoshop in limba romana predat de un instructor Photoshop certificat de Adobe
28 Replies
.sa-blog-grid .vc_gitem-zone {
background: white !important;
background-color: white;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-image: none;
}
this is the class that is setting it to auto
if you disable this and add cover instead, it will display the entire image
but this is wordpress, so you may not have any control over this element
here is that middle image on cover
and this is it set to 'contain'
thank you
trying it right now
@ghostmonkey do I simply remove all that code?
sorry for the silly question
I'm not finding that bit of code anywhere in visual code
based on the name, i assume it's from a plugin or part of whatever theme you are using
not sure how you would even look for it in visual code
PickPlugins
Plugin Directory
Post Grid Combo
Post Grid Combo is extremely easy to use for creating grid-layout and post-layout. Also, we're offering many small blocks with extensive flexibil …
is it this one maybe?
assuming yes, according to the documentation for this plugin, somewhere in the settings, will be a section for 'image blocks' where you can specify thumbnail sizes etc
and if you can't specifically set it to 'conver' or 'contain', then the next best solution is to specify the size in px and then resize the images you want to use as thumbnails to the same px
hmm ok
I'll have a look
but I wanna be clear
.sa-blog-grid .vc_gitem-zone {
background: white !important;
background-color: white;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-image: none;
}
I haven't been able to find this bit of code
I guess I am confused. This is a wordpress page and it's coming either from the theme or a plugin you have added
it can be fixed via css
the only easy way to change this behaviour, is to adjust the plugin settings.
I don't wanna work on the admin side
I don't have controls for that
even if you overwrite the css, you would still need access to the admin panel to add that though?
I have complete access
then change the plugin settings, i don't know why you wouldn't choose the easy solution
there's no controls in the admin panel related to that bit
I'm using a custom theme that's integrating that plugin, I didn't install it myself
send me a screenshot of your plugins list
and I don't have controls related to the way the image is being shown
oof that looks rough 😄
maybe under the appearance tab, in the customizer you can change it
where this says 'generatePress', yours will say 'Eduma Child' or something like that
try there
if not, then here select customize and then go through all those menus and see if you can get to it there
if this is your page, I would strongly urge you to consider rebuilding it from the ground up. You have an insane amount of unnecessary clutter and overhead, and you could recreate it without all this burden. It would greatly increase your page performance and load times as well
thanks for your help @ghostmonkey I appreciate it
where are you from?
Bosnia
Romania here
thanks for the tip