Vertical-align: middle; not working

Support
#1

http://www.tuabogado.mx/

I have marginless columns setup, but vertical-align: middle; is not working on the 1st area of text. Please help.

#2

Hello @logoglo,

Thanks for writing in!

Actually the vertical-align: middle; inline css you added in one of the columns is working as expected. You just do not see it because the column, the row, and the content band has the same height.

Do you want something like this?

If that is the case, you will need to add this inline element css in the row settings:

min-height: calc(100vh - 90px);

We would love to know if this has worked for you. Thank you.

#3

Thanks, thats exactly what Im after, what about the margin on the left on ipad view? its fine on the desktop, how can I have it align with the logo? ie not flush to the left of the screen?

Also, I have hide/show setup, but the mobile view is too tall, how do I get that container to fill the screen, and fill different screen sizes? much like the desktop version I would guess, but I tried and it wasnt working.

Thanks.

#4

Hi @logoglo,

Please inspect your Content Band and turn on the Inner Container option.

That is because of using huge fixed bottom padding.


Please remove that bottom padding and use the same solution provided by Ruenel above.

Thanks,

#5

Unfortunately the min-height: calc(100vh - 90px); didnt work, I added it to the row, but it didnt have any effect… I have this in my custom css, I dont know if it will effect it:

@media (min-width:992px) {
    .desktop-only {
        display:block !important;
          min-height: calc(100vh - 100px);
    }
   .mobile-only {
        display:none !important;
    }
}
 
@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }
 
    .desktop-only {
        display:none !important;
    }
}
.wpcf7-form label {
    color: #fff;
}
.page-id-90 #x-content-band-1 {
background: rgb(3,0,119);
background: -moz-linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
background: -webkit-linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
background: linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#030077",endColorstr="#02afee",GradientType=1);
}
.page-id-10 #x-content-band-8 {
background: rgb(3,0,119);
background: -moz-linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
background: -webkit-linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
background: linear-gradient(25deg, rgba(3,0,119,1) 8%, rgba(2,175,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#030077",endColorstr="#02afee",GradientType=1);
}
#6

The inner container is on

#7

Hi @logoglo,

Please add this to Theme Options > CSS as well.

.home .x-content-band.marginless-columns .x-container {
	width: 90%;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#8

That worked for the left alignment issue, but its still not aligning middle, would you mind going in and checking? see secure note.

#9

Hello @logoglo,

I went ahead and edited your custom css. I ended up using this:

.desktop-only > .x-container {
          min-height: calc(100vh - 90px);
    }

Please check your content band now.

1 Like
#10

perfect! Rue to the rescue again! thanks!

#11

sorry, anyway I can move that text up a little?

#12

Hey @logoglo,

The headline element moves a little bit because of the default top margin of the headline.
You will need to eliminate or reduce the top margin to move it up a bit. For more details about element spacing, please check this out:

Hope this helps.

#13

how would I reduce it? I can seam to find the right selector? thanks

#14

Hello @logoglo,

I have edited your page and in your headline element, I added custom class mtn which means “margin top none”.

If mtn class does not help, you can add inline element css of margin-top: 0; instead.

Regards.

Please check the page now.

1 Like
#15

Perfect! thanks!

#16

You’re welcome.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.