Space occupied by Projects/Portfolio

Hi,

Thank you for the wonderful theme Sydney.

I’ve created few projects with featured images and displayed these on the home page through "Sydney FP: Portfolio"
The problem is when I hover on these images the background color is not of same height. How can I make the background color to be the same dimension.

Hope I was able to explain the issue clearly. If needed I can give the site link.

Hello there,

Please share the link to your site, so I could be more exact.

Regards,
Kharis

Hello Kharis,

the link is http://rishva.com/ (section is ‘OUR RECENT WORKS’)
Also how can I adjust the gap/space (increase or decrease) between the images. The second and third logo/images looks attached to each other.

Thanks in advance.
Kiran

Hello there,

Thank you for sharing the link. It helped a lot.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:480px){
  
  .roll-project .project-item{
    padding: 10px;
  }
  
  .roll-project .project-item .project-pop {
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
  }  
  
}

Regards,
Kharis

Hello,

It worked. I can see about 10px space between the items/images. Thank you.

But I still have few doubts.

  1. I am actually using child theme. When I used your code in the custom CSS editor it didnt work. But when the same code is applied in child theme style.css it worked. Why?

  2. I have another piece of code in custom CSS editor (code pasted below). This code was working, though the same code is not there in style.css.

.site-info.container {
display: none;
}
a:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}

  1. For now I’ve removed the entire code from custom CSS editor, so you can see all the links will be in red color and on hover will be black color.

  2. Theme information is not displayed on the home page, but displayed on other pages.

  3. What is the default size (height and width) of the featured images for the projects? I’ll try to resize them accordingly.

This seemed a bit long one. Please try if you can help me.

Thanks & regards,
Kiran

> 1 & 2

Please be sure that the group of CSS code doesn’t contain any error. You can validate it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

> 4

That isn’t the default behavior of the theme. Did you edit the footer.php file?

> 5

The final size of the projects’ thumbnails was set to 480 pixel wide, and its height will follows proportionally. The image which is smaller than 480px won’t be resized.

Regards,
Kharis

Hi,

I got the code validated, no errors/issues.

I am sure I didn’t change the footer.php file. As I said I am using the child theme. How to verify whether the footer.php has changed?

So if I make the Project featured images size as 480/480 px will they display properly?

Thank you very much for your support.

Regards,
Kiran