Center only one project home page

Hi:
That’s my website: www.asociacionazarbe.es

I’m looking for centering the project wich is linked to a Youtube Video…(below Latest News). Could anyone help me?

Furthermore, is there any way to center as many projects as you are posting. The latest is left aligned.

Thanks!

Hi,

If you want to center the project which is on left ( it’s a single project ), please add an other project with a featured of the same background image, just like the background color, then the hover effect / link I can help you hide it on that with custom css, this is a work-around for your issue, but to center the project without this work-around you may need to modify the column structure which can break your site’s layout, so better this one, it’s easier and safer.

Best Regards,
Csaba

Hi Csaba:

Thanks for your help.

I’ve created a new project where I’ve inserted a white image. That’s wright?

I’ve got a custom css plugin…

But, if I do that… In a mobile view, you’ll see a large blank space between the title of the section and the desired project to be shown…

Hi,

Yes, it’s right, but if you had the image there, then I would be able to provide a CSS to remove that on mobile, but you can use this Custom CSS which will do center the project image only on that section:

#pgc-560-2-0 .col-md-4 {
width: 100%;
}

#pgc-560-2-0 .project-image {
background-color: transparent !important;
}

#pgc-560-2-0 .project-image img {
display: block;
margin-left: auto;
margin-right: auto;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi again:

It worked partially. I’m attaching a screen capture…DROPBOX IMAGE
Solution?

One more thing:

  • Is it possible to make the image of the project bigger and responsive?
  • This project is linked to a Youtube Video… Is it possible to set that a touch input on the image opens the link…?

Thanks for your dedication.

I’ve discovered other problem:
The services section has lost its alignment… Originally it has 2 rows and de 2nd centered…
:frowning:

Hey, forget my latest post (#post-317337). I’ve solved… :0

Whereas, previous post #317143, I’ve discovered how to resize the image. But, I imagine that by default projects resizes images to 350x250 px.
I added this code from yours:

#pgc-560-2-0 .project-image img {

display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
}
But it appears really ugly…

Well, I’m looking for 2 alternatives:

  1. Without changing the scale of the image, but centering the icon link and the magnifying glass.
  2. Scale the image without loosing quality.

Do you know any valid solution?

Thanks again.

Hi,

You can scale the project images without loosing quality by modifying this code in functions.php, line 42:

add_image_size('project-image', 350, 250, true);

Modify 350 and 250 values in the above code after changing the code please regenerate your thumbnails with this Plugin: https://wordpress.org/plugins/regenerate-thumbnails/ - In case this plugin will not work, then I recommend to remove all project images from wp-admin / Media and upload the images one-by-one after clicking “Set featured images” on Projects, but please make sure to upload the image after clicking that, not selecting already uploaded images, so WordPress can generate the thumbnails for you.

Best Regards,
Csaba

Thank you, it worked perfectly. Although I’ll have to create a child theme since every time the theme would be updated… Isn’t it?

Hi,

Great! You’re most welcome! I’m glad it worked! The Child Theme have to be created only once, once created you will only update the Parent Theme, but the Child Theme will not have to be updated ( only if you want to add further modifications ).

Best Regards,
Csaba

Hi guys,
I am having the same problem in Sydney theme and the above code is not working. Can you help please? thansk

Hi,

That code won’t work for you, because it’s only for santicpo’s website, it has an ID in front, but try without IDs in front then it should work:

.project-image {
background-color: transparent !important;
}

.project-image img {
display: block;
margin-left: auto;
margin-right: auto;
}

Please let me know how it works.

Kind Regards,
Csaba

oops i didnt check that. anyways i fixed it by using another code. thanks csaba

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba