Site logo

Archived topic

Center articles and categories at mobile phone

8 replies · Started by JOAQUIM GALANTE on March 4, 2021

Viewing posts 1–9 of 9

Hi,

what can i do to see on mobile phone the articles title, articles excerpt and read more buton at the center of the page?

How can i put the categories in color boxes in the mobile phone as i have in the site ?

https://focusmsn.pt

Thanks

Hi there,

Try this CSS to align to center:

@media (max-width: 768px) {
    .home .inside-article {
        text-align: center;
    }
}

And this to add background color to categories, you could adjust the paddings depends on your preferance:

@media (max-width: 768px) {
    .cat-links a {
        background-color: #898781;
        padding: 2px 5px;
    }
}

That CSS is to align to center in mobile phone ? Because for PC view i don't need.

Ying, the first one aligned on center, is right.

But the second one don't put the categories in color boxes

@media (max-width: 768px) {
.cat-links a {
background-color: #898781;
padding: 2px 5px;
}
}

What i have missing?

You actually don't need this CSS, you already have similar CSS, but it's under a media query:
@media (min-width: 768px) {, which makes the CSS only works on desktop.

Try to find the CSS you added, add one more}at the end should fix the issue.

@media (min-width: 768px) {

.wp-show-posts .wp-show-posts-inner {
    overflow: hidden;
}

Thanks Ying, solved, but another problem appear, the title of the articles on the magazine grid appear now in black on mobile and i want it in white like in PC.

What can i do?

You'll need to exam all your CSS, find out if there's another missing } after each media query, or if the CSS should be included under a certain media query.

Solved, thanks a lot.

No problem :)

This archived topic is closed to new replies.