Docs

[Kristan P]

Hi there

http://www.motionsonic.co.uk/test1/

How do have it so the three promo boxes line up vertical on a small screen as at the moment they go really narrow so makes the text very awkward to read and some of the titles get cut off and just looks bad! The main problem is when on mobiles.

I’m currently using block gird to allign the promo boxes as that’s the only thing I found that worked.

Thanks a lot

[Thai]

Hi There,

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

@media(max-width: 480px){
    #post-7080 .x-block-grid.three-up>li {
        width: 100%
    }
}

Hope it helps 🙂

[Kristan P]

Actually after updating x theme (I was on 2.02!) it has aligned it properly now.

Another quick point, unrelated, but my blog page background is not showing up, even when I have an image uploaded in the normal place to add a background picture. It’s as though when that page is assigned to be the blog post page it overwrites the background image with nothing.

http://www.motionsonic.co.uk/blog

I’ve tried using the code as searched:

.blog .site {
background-image: url(“path-to-your-image-here”);
}

but it doesn’t look right as the picture has a clear line where it starts again. Unlike the normal background pictures.

Cheers

[Christian]

Hey there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Kristan P]

Is there another option as I’d rather not pass over log in details.

Thanks.

[Kristan P]

one point to mention is that the when I changed what page was to become the blog post page from the wordpress reading settings, it did indeed override the background image on that page too.

[Christopher]

Hi there,

I’m sorry but we need to check your settings to find the problem. Please provide us with login credentials in private replay.

Thanks.

[Kristan P]

This reply has been marked as private.

[Joao]

Hi Kristian

Please follow this example:

.blog .site {
  background: #fafafa url(http://entropymag.org/wp-content/uploads/2014/10/outer-space-wallpaper-pictures.jpg) center top repeat;
}

Hope that helps,

Joao

[Kristan P]

Hi there

Thanks a lot. It works ok. Not quite as good as the normal background option, no idea why that isn’t working.

Thanks for your help.

One more thing,

The promo boxes on: http://www.motionsonic.co.uk/test1 do not vertically align. I’ve tried using code from a previous thread to no avail. (.x-promo {min-height: 683px; position:relative;} /*set promo boxes with minimum height*/
.x-promo a.x-btn.x-btn-block {position: absolute; width: 80%;bottom: 0;margin: 0 auto 5%;} /*position the button to the bottom*/)

Thanks a lot

[Nabeel A]

Hi again,

You can use the following code for the alignment of the promo boxes:

.x-promo {
    min-height: 790px !important;
    background: #fff !important;
}

Let us know how this goes!

[Kristan P]

Great that worked perfectly thanks.

Lastly how do i get the buttons to then allign at the bottom and not at the end of the text. Preferably central too.

Cheers

[Thai]

Please add the following CSS:

.x-promo-content .x-btn {
    display: block;
    max-width: 170px;
    margin-left: auto;
    margin-right: auto;
}

Hope it helps 🙂

[Kristan P]

Thanks, that aligned the buttons to be central but they are still at the bottom of the text, not at the bottom of the actual box as desired.

[Jade]

Hi Kristian,

I tried to access the page and login using the details in response #1005312 but it seems to be not working anymore.

Kindly provide us with the update logins so that we can check the page. Thank you.

[Author]

Posts