Our Work - Number of items in the row


#1

Hello.

Hi I was wondering if you could please let me know how to have 3 samples in a row instead of 4. Righ now I have 4 sample across.

My site: http://creativew.com/theme

Thanks so much,
Esteban


#2

Dear Esteban,

I would like to apologize in advance for delayed respond.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin?

.roll-project.fullwidth .project-item{
 width: 33.3333%;
}

I hope it helps. Navigate here for your reference.

Regards,
Kharis


#3

Good stuff. The only problem is that on screen sizes 1445px and larger, I see white spacing appear between the images, but the image should be full width of browser.

Thanks,
Esteban


#4

Hi Kharis,

I followed the directions from your reference link, but it did not solve my problem. I have white space vertically, not horizontally like the link sample.

Hope you can tweak the code you provided.

Thanks again,
Esteban


#5

Dear Esteban,

Could you please try the following code?

  .roll-project.fullwidth .project-item{
    width: 33.333333%;
  }

Let me know how it works.

Regards,
Kharis


#6

Sorry, that did not work. I hope you can solve this issue for me. It’s a really important piece for me.

Here is a screenshot of what I am seeing. http://creativew.com/access/sydney/5.png

The code I currently have in my .css file is:
@media only screen and (min-width: 769px){
.roll-project.fullwidth .project-item{
width: 33.333333%;
}
}

Thank you for your time Kharis,
Esteban


#7

Hello there,

Try to apply the following.

@media only screen and (min-width: 769px){
  .roll-project.fullwidth .project-item img{
   width: 100%;
   height: auto;
  }  
}

Regards,
Kharis


#8

Beautiful! Thank you Kharis.

Topic Solved :slight_smile:


#9

Hey guys,

I tried the same but the images are quite blurry / pixelated. What can I do?

Thanks.
Charly


#10

Hello Charly,

Please share a link to your site here to allow us inspecting what might be causing you that issue. Probably the original image size (before upload) is too small?

Regards,
Kharis


#11

Hi Kharis,

thanks for you answer. I’m working offline at the time that’s why sharing a link is quite difficult. The image size should be good. It’s 1200px x 800px. Do I have to share the link to this website or is there another way? If so I would have to send you an email with a private link, if that’s possible.

kind regards
charly


#12

It seems like it uses automatically generated thumbnail images with the max-width of 480px (see screenshot).


#13

Sorry, I forgot to mention, that I didn’t use the 33.33% but 50%. I want to display two Projects in a row. So, my code looks like this:

    .roll-project.fullwidth .project-item img{
      width: 100%;
      height:auto;
      max-width: none;
    }

    .roll-project.fullwidth .project-item{
      width: 50%;
    }

    @media only screen and (max-width: 1025px) {
      .roll-project.fullwidth .project-item{
        width: 100%;
      }
    }

#14

Yes you’re right. For better site’s performance purpose, project images are down-sized to 480px in maximum after upload. It only applies for images larger than 480px. To change it to your preferred final size, you can use the Simple Image Sizes plugin. In the plugin’s settings panel, find the sydney-mas-thumb and define your size in there.

Regards,
Kharis


#15

Thanks a lot, Kharis. That worked perfectly. Your help is much appreciated.
Keep up!
Cheers
Charly