Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2835581
Change only desktop version
Closed

Comments

  • juli312c started the conversation
    July 27, 2021 at 4:06pm

    Hi

    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.

  •  2,493
    PenciDesign replied
    July 27, 2021 at 4:28pm

    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 replied
    July 27, 2021 at 4:34pm

    Hi 

    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.

  •  2,493
    PenciDesign replied
    July 27, 2021 at 4:51pm

    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
    July 27, 2021 at 4:55pm

    Thank you very much :-)