[TimParticipant]

Well, this works fine with the mobile view. But still, i need the images a bit larger and the gaps smaller…

By using the editor tool(firefox) i still get this values on the contentband (x-column vc one-fourth):

.x-column.one-fourth {
width: 22%;
}

.x-column {
float: left;
margin-right: 4%;
}

How ever… if i change those to:

.x-column.one-fourth {
width: 24%;
}

.x-column {
float: left;
margin-right: 2%;
}

I get exactly what i want…. but i cant use those rules in the customizer…. isnt ther a possibility?

[ZeshanMember]

Hi Till,

In that case, use following CSS instead of the one provided in our last reply:

@media (min-width: 768px){
   #x-content-band-2 .x-column.one-fourth {
      width: 24%;
   }

   .x-column.one-fourth {
      width: 25%;
   }

   .x-column {
      margin-right: 1%;
   }

   #x-content-band-2 .x-column.one-fourth {
      width: 25%;
   }

   #x-content-band-2 .x-column {
      margin-right: 1%;
   }
}

Hope this helps.

Thanks!

[TimParticipant]

Sorry, its not working as it is pushing the two images (that should be on the very right side) to the bottom. please have a look: http://www.sandbanksylt.de/test/

[CousettMember]

It looks like changing the CSS to 20% works best:

#x-content-band-2 .x-column.one-fourth {
width: 20%;
}

[TimParticipant]

Well this is what is happening:
http://www.sandbanksylt.de/test/wp-content/uploads/2014/10/Bildschirmfoto-2014-10-23-um-10.42.12.png

right now the width is set to 23%, witch is as far as i can go before the images gets pushed downwards….

Is the absolutely no way that i can get the images to allign with the line above???

[TimParticipant]

This reply has been marked as private.

[CousettMember]

Unfortunately I was not able to log in could you check your settings and send them to us again.

[TimParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Till,

Thanks for the login.

To make it align with the line above.

You can add this under Custom > CSS in the Customizer.

#x-content-band-2 .x-container-fluid.max.width .x-column:last-child {
     margin-right:0;
}

#x-content-band-2 .x-column.one-fourth {
    width: 24%;
}

Hope that helps.

[TimParticipant]

Thanks a lot!!! sooooo its finaly working.

1) i still need the space betwen the images to be the same (under and over them as in betwene )?

2) what shall i do with the code i used before, combine those?

/* Home gallery*/
@media (min-width: 768px){
#x-content-band-2 .x-column.one-fourth {
width: 24%;
}

.x-column.one-fourth {
width: 24%;
}

.x-column {
margin-right: 2%;
}

#x-content-band-2 .x-column.one-fourth {
width: 23%;
}

#x-content-band-2 .x-column {
margin-right: 2%;
}
}

[Nabeel AModerator]

Hi Till,

1. Can you please provide us the screenshot of the images that needs to be adjusted?

2. I am not entirely certain what it is you would like to accomplish based on the information given . If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

[TimParticipant]

2) this is the code i used first. The problem was, that it did not make the content band go all the way to the right hand side of the page, so there was no alignment to the line above…. But, id gave a fine display on the mobile phone as it showed the images large….

@media (min-width: 768px){
#x-content-band-2 .x-column.one-fourth {
width: 24%;
}

.x-column.one-fourth {
width: 24%;
}

.x-column {
margin-right: 2%;
}

#x-content-band-2 .x-column.one-fourth {
width: 23%;
}

#x-content-band-2 .x-column {
margin-right: 2%;
}
}

gap to the right: http://www.sandbanksylt.de/test/wp-content/uploads/2014/10/Bildschirmfoto-2014-10-28-um-09.38.56.png

Perfect Mobile view:http://www.sandbanksylt.de/test/wp-content/uploads/2014/10/Bildschirmfoto-2014-10-28-um-09.40.51.png

______________________________________________________

This is the new code. it makes the content band go all the way to the right and look just how i want it to be…. But it is not working for the mobile phone because the images gets displayed very little…..

#x-content-band-2 .x-container-fluid.max.width .x-column:last-child {
margin-right:0;
}

#x-content-band-2 .x-column.one-fourth {
width: 24%;
}

Perfect right: http://www.sandbanksylt.de/test/wp-content/uploads/2014/10/Bildschirmfoto-2014-10-28-um-09.39.41.png

Bad Mobile view: http://www.sandbanksylt.de/test/wp-content/uploads/2014/10/Bildschirmfoto-2014-10-28-um-09.40.07.png

_______________________________________________

right now both codes are in use (might be to much code), but the mobile display is still to small…..

[Paul RModerator]

Hi Till,

To fix the mobile version, you can add this under Custom > CSS in the Customizer.

@media (max-width:775px) {
    #x-content-band-2 img.x-img,
    #x-content-band-2 a.x-img>img {
         width:100% !important;
    }

    #x-content-band-2 .x-column {
         width:100% !important;
         margin-right:0 !important;
    }
}

Hope that helps.

[TimParticipant]

This reply has been marked as private.

[CousettMember]

Glad we were able to help. 🙂 Have a nice day. Yes you can keep all the lines of code.

[Author]

Posts