Docs

[Chgrim]

Hi Joao,

I tried adding that code and it shifted things around. So I redid the numbers in the padding to make it work but when I scale it down it becomes mis-aligned again.

Thanks
Chris

[Christopher]

Hi there,

Upon checking http://www.topdownreviews.com/mattress/, I see that you’ve hidden slider on mobile. Please confirm that if we’re looking at the right page and provide us with some screen shots.

Thanks.

[Chgrim]

Hi, I do have it hidden it on the mobile. What I am talking about is when I scale the browser down to tablet or smaller desktop sizes I still get the mis-aligned aspect.

Thanks
Chris

[Joao]

Hi There,

Seems like you have made some changes I updated to :

input[type="submit"] {
line-height: 0.65em;
}

and it looks better on my end.

How about on yours?

[Chgrim]

Hi Joao,

I have the .65 and it looks like this for me:

[Friech]

Hi There,

Please add this on your custom CSS on Customizer.

#x-section-1 .x-subscribe-form fieldset input[type="submit"] {
	height: 1.35em;
	border-bottom: 1px solid #ececea !important;
}

Hope it helps, Cheers!

[Chgrim]

Hi, I tried adding that and then I had to adjust the settings of the button to this.

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
    padding: 19px 18px 20px !important;
}

in order to make it line up. But when I scale down the website it becomes un aligned again. Here is all the code I have in my CSS.

.x-subscribe-form fieldset {
	display: inline-block;
    vertical-align: top;
}

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
    padding: 19px 18px 20px !important;
}

.x-subscribe-form input[type="email"] {
    background-color: rgba(255,255,255,0.9);
    font: rgba(0,0,0,1);
    margin-top: 0 !important;
}
.cp-info-bar .cp-form {
  margin-bottom: 1px;
  margin-top: 1px;
}
input[type="submit"] {
line-height: 0.65em;
}
.site{
background-color: transparent;
}
.x-sidebar .widget {
    margin-top: 1em;
}
#x-section-1 .x-subscribe-form fieldset input[type="submit"] {
	height: 1.35em;
	border-bottom: 1px solid #ececea !important;
}

Cheers!
Chris

[Lely]

Hello Chris,

The misalignment is because the font size adjust automatically.
Update this part:

.x-subscribe-form input[type="email"] {
    background-color: rgba(255,255,255,0.9);
    font: rgba(0,0,0,1);
    margin-top: 0 !important;
} 

To this:

.x-subscribe-form input[type="email"] {
    background-color: rgba(255,255,255,0.9);
    color: rgba(0,0,0,1);
    margin-top: 0 !important;
    font-size: 13px !important;
}

This part:

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
    padding: 19px 18px 20px !important;
}

To this:

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
    padding: 19px 18px 13px !important;
}

See this:http://screencast-o-matic.com/watch/cDXnhmj71Z

Hope this helps.

[Author]

Posts