Change only desktop version

Public Ticket #17534

Conversation thread

juli312c replied

5 years ago

Customer Reply

Thank you very much :-)

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

If you want to customize the home page or another page of WordPress pages, you should use custom CSS.

For example:

/* change the site width on PC */
@media only screen and (min-width: 961px) {
    body.home .container {
        width: 70%; /* homepage pc width */
    }
    body.category .container {
        width: 70%; /* category pc width */
    }
    body.archive .container {
        width: 70%; /* tags/search/ pc width */
    }
}
/* change the site width on mobile */
@media only screen and (max-width: 767px) {
    body.home .container {
        width: 70%; /* homepage mobile width */
    }
    body.category .container {
        width: 70%; /* category pc width */
    }
    body.archive .container {
        width: 70%; /* tags/search/ mobile width */
    }
}

Regards,
PenciDesign.

juli312c replied

5 years ago

Customer Reply

Thank you for fat reply.

How can I then change the width on my homepage and post-category pages? I can't find a place to do that, without using custom CSS, and when I do that, my mobile version looks very narrow.

I want the width to by like the attached picture.

Thank you.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

When you access your site via phone, Soledad Theme will automatically make site width 100%. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code if you want to set a custom width for mobile/small screen devices:

@media only screen and (max-width: 767px) {
    .container {
        width: 50%;
    }
}

You can change 50% to your custom width.

Regards,
PenciDesign.

juli312c started the conversation

5 years ago

Conversation Start

I wish to change the width of my homepage and blog post-categories pages, but only on the desktop version, and not the mobile and small-screen version of my website. When I customize my website, I can only find a function that lets me change the width on "pages", but not to the homepage and category/archives pages. I've tried to change the width on the whole website via custom CSS, but this makes the mobile-version look bad.

How can I change the width, so that it looks like picture 1 and keeps the mobile-version like picture 2?

Thank you.

Want to join this conversation or access attachments? Sign in first.