[Tyler CParticipant]

I’m trying to make a row of 4 columns, each with their own image and have the images span the whole width of the window with no margins or padding between images.

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).

[Tyler CParticipant]

I also on one more attempt that I forgot to list that in the styles by adding a width property of 25% I can get the images to fill the width side by side, but on mobile they will go to one column at 25% leaving 75% of white space.

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

[ChristianModerator]

Hey Tyler,

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.

[Tyler CParticipant]

This reply has been marked as private.

[AlexanderKeymaster]

Hi Tyler,

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

[Tyler CParticipant]

Thanks a bunch, that seems to have worked!

[AlexanderKeymaster]

You’re welcome! Take care 🙂

[Oliver PParticipant]

Hi, sorry to hijack this thread, but it seems to be along the same lines as to what I am wanting to achieve. A full width row (to browser edges) within the structure of the rest of the page, example image below.Integrity settings in Customizer are set as :

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:

[ChristianModerator]

Hey Oliver,

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. 🙂

[Author]

Posts