Projects set up

Hello,

I would like to ask you how to make the projects so there is just 5px white space around and without the white line between the photos. http://www.valter-marosi.com/about-valter/

Hello there,

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

.roll-project.fullwidth .project-item {
 padding: 5px; 
}  

.roll-project .project-item .project-pop{
  width: calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -moz-calc(100% - 10px);
  height: calc(100% - 10px);
  height: -webkit-calc(100% - 10px);
  height: -moz-calc(100% - 10px);  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

This worked perfectly, but I didn’t want to achieve this :slight_smile: I wanted to clear the white space around the whole widget. So the layout is just 5px.

This might help you :slight_smile: http://postimg.org/image/60jw4ir5z/

Also there’s some problem with the code: https://www.dropbox.com/s/c7jrks4oe394a2x/2015-12-25_1850.png?dl=0

It shows ‘Show All’ and ‘Me’ (The slug category)

I sent you a bad link, here is the right one: https://www.dropbox.com/s/l1u2b73z76oyzve/2015-12-25_2308.png?dl=0

Hello there,

To remove the left and right spaces, go edit your page > navigate to your project row > Edit row > Row Styles > Theme > Row Layout > select “Full Width Stretched”. See this GIF for the sake of visual http://d.pr/i/1eDtp

To remove the top and bottom spaces, from the row editor panel, find the option that says “Top/bottom padding”, then set 0px.

To hide the project filter, try to add the following CSS code through the Simple Custom CSS plugin.

.project-filter{
  display: none;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Perfect!! :slight_smile: Thank you so so much Kharis!!

You’re welcome.

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

I’m happy to have an opportunity to assist you.

Warmest regards,
Kharis

HI, I’d like to know how to manage to see just 3 or 4 images with the same size when I upload the images.
I’d like them to be large images, like 250px x 370x.

How can I do that?

Hello there,

Make sure your original images before uploading have equal size. Then enlarge each item to become 250px wide, add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


@media only screen and (min-width:768px) {
  
  .roll-project.fullwidth .project-item {
     width: 250px !important;
  }  
  
  .roll-project.fullwidth {
    margin-left: auto;
    margin-right: auto;    
  } 
  
}

@media only screen and (min-width:768px) and (max-width:991px) {
  
  .roll-project.fullwidth {
    max-width: 500px;
  }
  
}

@media only screen and (min-width:992px) and (max-width:1199px) {

  .roll-project.fullwidth {
    max-width: 750px;
  }  
  
}  

@media only screen and (min-width:1200px) {

  .roll-project.fullwidth {
    max-width: 1000px;
  }    
  
} 

If you have 3 projects, replace this code block:


@media only screen and (min-width:1200px) {

  .roll-project.fullwidth {
    max-width: 1000px;
  }    
  
} 

to:


@media only screen and (min-width:1200px) {

  .roll-project.fullwidth {
    max-width: 750px;
  }    
  
} 

Regards,
Kharis

I tried the code in other page and worked but is not working for this one: http://sastrada.com/sastrada/el-armario-de-sastrada/

:frowning:

Please share the link to the page where you find it works correctly, so I can compare them.

Regards,
Kharis

The thing is that the page where it used to work I changed it domain to the new one so i think now is impossible to see. I just want a white space between pictures. Now, as you can see, all of them are together.