Docs

[Nabeel A]

Hi there,

Please add the following code in your Customizer:

.x-subscribe-form-760 .submit {
    padding: 7px 17px !important;
    margin-top: 3px !important;
}
footer #x-section-21 {
    padding: 0 !important;
    margin: 0 !important;
}

Let us know how this goes!

[brighthings]

This reply has been marked as private.

[Jade]

Hi there,

#1

.x-subscribe-form-760 input {
    padding: 7px 17px !important;
    margin-top: 3px !important;
}

#2

@media (max-width: 505px) {
    .x-subscribe-form-760 fieldset {
        width: 100%;
        margin-bottom: 5px;
    }
}

Hope this helps.

[brighthings]

This reply has been marked as private.

[Paul R]

Hi,

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

@media only screen 
  and (min-device-width: 979px) 
  and (max-device-width: 1280px) {
.x-colophon.top .x-column.x-1-4 {
    width: 48%;
}

.x-colophon.top .x-column.last {
    max-width: 250px;
}

.x-colophon.top .x-column.x-1-4:nth-child(2) {
    margin-right:0;
}
}

Hope that helps.

[brighthings]

This reply has been marked as private.

[Joao]

Hi There,

Upon checking your website it seems to be working. I have fixed one code mistake, there was a missing }

In case you think it is not working, please provide more detailed information about what you would like to improve.

Also remember to clean your browser cache before checking it.

Thanks

Joao

[brighthings]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code:

.x-colophon.top .textwidget #x-subscribe-form-760 fieldset {
    margin-bottom: 10px;
    width: 100%;
}

#x-subscribe-form-760 #x_subscribe_form_email {
    border-radius: 5px 0 0 5px;
    border-right: 0;
}

.x-colophon.top .textwidget #x-subscribe-form-760 fieldset:last-child {
    width: 40%;
}

.x-colophon.top .textwidget #x-subscribe-form-760 fieldset input[type="submit"] {
    max-width: none;
    border-radius: 0 5px 5px 0;
    border-left: 0;
    height: 43px;
    left: -1px;
}

.x-colophon.top .textwidget #x-subscribe-form-760 fieldset+fieldset {
    width: 60%;
    float: left;
}

.x-colophon.top .textwidget #x-subscribe-form-760 fieldset:last-child {
    width: 40%;
    float: right;
}

The result should look like this:

[brighthings]

This reply has been marked as private.

[Christopher]

Hi there,

There are missing curly brackets in your code.
Please find these codes and close curly bracket for media query rules :

@media (max-width: 979px) {
    .x-navbar-inner .x-container {
        position: relative;
    }

    .x-brand {
        position: absolute !important;
        bottom: -25px;
        top: auto !important;
    }
@media (max-width: 505px) {
    .x-subscribe-form-760 fieldset {
        width: 100%;
        margin-bottom: 5px;
    }
.x-subscribe-form-760 input {
    padding: 7px 17px !important;
    margin-top: 3px !important;
}
  @media only screen 
  and (min-device-width: 979px) 
  and (max-device-width: 1280px) {
.x-colophon.top .x-column.x-1-4 {
    width: 48%;
}

The correct format would be :

@media (max-width: 979px) {
/* style*/
}
@media (max-width: 505px) {
/* style*/
}

  @media only screen 
  and (min-device-width: 979px) 
  and (max-device-width: 1280px) {
/* style*/
}

Hope it helps.

[brighthings]

This reply has been marked as private.

[Lely]

Hi There,

It’s going down because of the following custom CSS:

@media (min-width: 980px){ /*Inside the media query you have the following*/
.x-colophon.top, .x-column:last-of-type {
    min-width: 250px;
}

By default 1/4 column is 22% width. That custom code override it. Then when we resize the screen, 250px is more than the allotted 22%. This made the column go down because 3 columns with 22% width plus another column with 250px width will not fit in 1 row. What we can do instead is move the last column officially below and adjust the 3 columns accordingly. Please try adding this custom CSS too:

@media (min-width: 981px) and (max-width: 1280px) { 
.x-colophon.top>div .x-column.x-1-4 { /*This will make the first 3 columns even out*/
    width: 32%;
}
footer.x-colophon.top>div>div:nth-child(3) {
    margin-right: 0;
}
.x-colophon.top>div .x-column.x-1-4.last { /*This will make the last column in center on the next row below*/
    width: 250px;
    margin: 0 auto;
    float: none;
    clear: both;
    padding-top: 33px;
}

Now you on 1280 screen, you have still 4 columns. Then on screen size >981px and <=1280px the first 3 columns will occupy the first row and the last one with form will be below but centered.
Hope this helps.

[brighthings]

This reply has been marked as private.

[Paul R]

Hi,

You may change the width 32% above to reduce the width. Then add this in your custom > Edit Global CSS to cener your columns.

.x-colophon.top {
    text-align:center;
}

.x-colophon.top .x-column.x-1-4 {
    display: inline-block;
    float: none;
    vertical-align: top;
    text-align:left;
}

Hope that helps.

[Author]

Posts