Currently I have been running into a problem with white space when attempting manipulate the column styles in the visual composer. I either get a gap in-between each image but the images span the width of the window, or I have the images side-by-side with a gap on the far right.

I would like no-space in-between each image and the 4 images filling the width of the screen on a desktop when resized to mobile phones have it be 1 or 2 images that fill the width (currently mine goes to 1 image and displays well on phone width).

Thanks for any help, really digging the theme so far other wise.

I suggest that you make your own column class instead of the built-in columns with X. Then, target that class with a media query for mobile devices. Can you give us the URL of your site so we could see your current setup? We can help you from there.

Thanks.

Thanks for the info.

First thing I’d recommend here is removing the 25% width you’ve applied directly to the element. Otherwise it will always be applied even on small screens.

Next, remove the “margin:0;” style from the columns as well (there’s a better solution)

Once you have those inline styles removed, I’d recommend adding the man utility class to your columns. This stands for “Margin All None” and is useful to force the margins to zero without inline styles.

Finally, add this custom CSS (Customizer > Custom > CSS)

@media (min-width:767px) {
  .x-column.one-fourth.man {
    width:25%;
  }
}

This will give your columns the proper width, but only on larger screen sizes, and only when the man class is present. This way you don’t disrupt the rest of your grid system

Sitelayuot: Full Width
Site Max Width: 1500px
Site Width: 90%
content layout : Fullwidth
COntent width: 74%

This is the layout i would like to achieve

to create a portfolio section similar to:

We recommend that you use Blank – No Container | Header Footer page template. Regretfully, you need to manually code that image grid. The HTML code would look like:

<div class="img-col"></div>
<div class="img-col"></div>
<div class="img-col"></div>
<div class="img-col"></div>

and the CSS would look like:

.img-col {
width:25%;
float:left;
margin:0;
}

Hope that helps. 🙂