2 Column Projects

Hi,

I am trying to get my projects display as 2 columns. I was able to get the hover to increase in size to stretch the screen but my images will not increase to match the same size.

This is the CSS that I used to get the hover to change.
.roll-project img {
width: 100%
}

@media only screen and (min-width: 1024px){
.project-item.item.isotope-item {
width: 50%;
height: 500px;
}
}
@media only screen and (max-width: 1023px){
.project-item.item.isotope-item {
height: 245px;
}

My website is: http://fizzy-shake.flywheelsites.com/

If you could help me out, that would be greatly appreciated.

Thanks,
Kelsey

Hello Kelsey,

The default size of the projects images is limited to 480px maximum wide. Based on your code changes, it shouldn’t be scaled. To do so, add this PHP function to child theme’s functions.php file:

    function perth_child_masonry_images() {
        add_image_size('perth-mas-thumb', 9999);
    }
    add_action( 'after_setup_theme', 'perth_child_masonry_images' ); 

Or you can use a functionality plugin like Code Snippets without running a child theme.

Afterwards, to reproduce the image size, regenerate it with this plugin.

Regards,
Kharis

Hi Kharis,

I tried adding that to my child theme functions file and using the regenerate plugin but it didn’t seem to work. I tried refreshing and deleting the cache but it was still the same.

Unfortunately, when I used the regenerate thumbnails plugin it changed the sizes to a lot of other images, so I have deactivated that plugin and removed the function coding so I can get my images to hopefully resize back to normal.

Thanks,
Kelsey

Hi Kharis,

I just realized that the image wasn’t changing because the size of 9999px was too large, so I changed it to:

function perth_child_masonry_images() {
add_image_size(‘perth-mas-thumb’, 1000);
}
add_action( ‘after_setup_theme’, ‘perth_child_masonry_images’ );

I also reactivated the plugin regenerate thumbnails and it sized the images correctly.

The only other issue that occurred is that the hover is no longer responsive to the page size, so just edited the CSS to be:

@media only screen and (min-width: 1024px){
.project-item.item.isotope-item {
width: 50%;
height: auto-flow;
}

Which seemed to fix it for my browser but when I view it on my mobile the height stretches too large. Is there a way for my to fix the mobile overlay?

Thanks,
Kelsey

Hello there,

It looks like your code missing closing brace for media query definition.

    @media only screen and (min-width: 1024px){
      .project-item.item.isotope-item {
        width: 50%;
        height: auto-flow;
      }
    }  

Regards,
Kharis

Hi Kharis,

Thank you for your help!

Kelsey

You’re welcome Kelsey.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis