Docs

[cxander]

In the first section of my homepage I have a background image and split that row into 3 columns equally by thirds. The last column in that section has a form within it. I was wondering if it was possible to position the last column container so when the screen resizes for responsiveness it is always at a certain percentage of the screen width. For example the screen width is always 100% left to right no matter the resolution, so could say the 3rd column will start always at 75% of the total screen width?

If it helps, my website is http://www.soundinnovationdj.com

Thank you for the help.

[Thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.home #x-section-1 > div > div:nth-child(3) {
    position: absolute;
    left: 65%;
}

Hope it helps 🙂

[cxander]

Yes, that seemed to do the trick. I will test on smaller screen sizes to be sure. Thank you!

[Rue Nel]

Hello There,

Thanks for updating in! Please let us know if that code works or not in smaller screens. And if it does not, you can add something like this:

.home #x-section-1 > div > div:nth-child(3) {
    position: absolute;
    left: 65%;
}

@media(max-width: 1100px){
  .home #x-section-1 > div > div:nth-child(3) {
    left: 30%;
  }
}

Feel free to adjust the left in percentage and see if it applies.

[Author]

Posts