[TimParticipant]

Hi X,

On this page (https://albertoaxu.com/bruidsjurken/bruidsjurken-princess-baljurk/) i want to change the output on mobile to two columns. I have used this css:

@media (max-width: 767px) {
  #x-section-2 .x-column {
    float: left !important;
    margin-right: 4% !important;
  }

  #x-section-2 .x-column.x-1-4 { 
    width: 46%;
  }

  #x-section-2 .x-column.last, 
  #x-section-2 .x-column:last-of-type {
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #x-section-3 .x-column {
    float: left !important;
    margin-right: 4% !important;
  }

  #x-section-3 .x-column.x-1-4 { 
    width: 46%;
  }

  #x-section-3 .x-column.last, 
  #x-section-3 .x-column:last-of-type {
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #x-section-5 .x-column {
    float: left !important;
    margin-right: 4% !important;
  }

  #x-section-5 .x-column.x-1-4 { 
    width: 46%;
  }

  #x-section-5 .x-column.last, 
  #x-section-5 .x-column:last-of-type {
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #x-section-6 .x-column {
    float: left !important;
    margin-right: 4% !important;
  }

  #x-section-6 .x-column.x-1-4 { 
    width: 46%;
  }

  #x-section-6 .x-column.last, 
  #x-section-6 .x-column:last-of-type {
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #x-section-7 .x-column {
    float: left !important;
    margin-right: 4% !important;
  }

  #x-section-7 .x-column.x-1-4 { 
    width: 46%;
  }

  #x-section-7 .x-column.last, 
  #x-section-7 .x-column:last-of-type {
    margin-right: 0 !important;
  }
}

Now while this does work, notice the strange output in column 5 & 6. What am I missing here?

Cheers!

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[TimParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Tim,

Please change your code to this.

@media (max-width: 767px) {
#x-section-2 .x-column.x-sm,
#x-section-3 .x-column.x-sm,
#x-section-5 .x-column.x-sm,
#x-section-6 .x-column.x-sm,
#x-section-7 .x-column.x-sm {
    float: left;
    width: 48%; 
    margin-right: 4%;
}

#x-section-2  .x-column.x-sm.x-1-4:nth-child(even),
#x-section-3  .x-column.x-sm.x-1-4:nth-child(even),
#x-section-5  .x-column.x-sm.x-1-4:nth-child(even),
#x-section-6  .x-column.x-sm.x-1-4:nth-child(even),
#x-section-7  .x-column.x-sm.x-1-4:nth-child(even) {
    margin-right: 0;
}
}

Hope that helps.

[TimParticipant]

Hi Paul,

That works perfect! Thanks again for the best support ever:)

Cheers!

[RahulModerator]

Glad we were able to help you out.

Feel free to ask us again. 🙂

[Author]

Posts