Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

help styling mobile category pages

  • I sorted the first issue but can you please help how to remove a little of the padding on the blog and blog category pages

    thanks Lee

  • Hi there,

    Could you provide the site URL?

  • You have this CSS in the Customizer:

    #content {
       padding: 40px;
    }

    Just adjust the padding value to decrease the padding.

  • Ahhh yes of course, I should have thought to look there. Thank you

    I also want to change the background colour for some of the mobile pages to white so it isn’t so cramped. eg front page white, individual blog posts white. When I try change background colour for body in customiser with the mobile icon selected it is changing on desktop too.

    Am I in the wrong space?

  • The Customizer color settings will apply to all devices, so if you want to target mobile devices only, you need to use CSS. For example:

    @media (max-width: 768px) {
    	body:is(.home, .blog) {
    		background-color: white;
    	}
    }

    This will change the background color of the homepage and blog page to white on mobile devices.

  • thank you Alvind
    Is there any way to differentiate where the main blog page stays coloured background, but the individual posts pages are white?

  • You need to inspect the page source and look for the unique body class of the page. For example, in the CSS above, .home and .blog are the unique body classes for the home page and blog page, which I found here: https://cln.sh/88CHlDd6

    For individual posts, look for the postid-xxx class, where xxx is the post ID of the post. Here’s an example: https://cln.sh/6lmrMzsX.

  • Ok so that will be difficult as it would need to be continually updated with new post id as we add new posts.

    In the code you shared, to make the entire mobile site white, do I just remove the body:is line?

    thanks

  • In the code you shared, to make the entire mobile site white, do I just remove the body:is line?

    Just remove the :is(.home, .blog) part. So it will be:

    @media (max-width: 768px) {
    	body {
    		background-color: white;
    	}
    }
  • Thank you. If there is currently no element that is causing the styling of the blog archive pages (ie the content template that each blog post shows within), where is that styling coming from? Ie if I wanted to put a small border around each blog post on the archive page.

    Or if I created an element what location do I set it to to affect the /blog page and the category archive pages

    thanks

  • The blog page will use the Blog location, while for archive pages you can use the All Archives location.

  • thank you.
    Last things (I think)

    I cant work out how to add in an icon next to the categories tag on the blog content element (the original had a little black file icon) and I want to change the post date to black but the colors tab is not there to change that?

    thank you

  • I cant work out how to add in an icon next to the categories tag on the blog content element

    Where can I see it?

  • Hi Ying
    This is the blog page, created using an element.
    https://leecorbett.co/blog/

    Within each content block I want a little filing case icon before the categories, and I want to change the text for the date published to black.

    thanks

  • How did you build the category button section? I inspected the source, and it seems like the block markup is being output on the frontend where it shouldn’t be happening: https://cln.sh/CJSqsYPS

    When you select the Headline block, there should be an option to change the color under the Typography block settings on the right side.

Viewing 16 posts - 1 through 16 (of 18 total)
  • You must be logged in to reply to this topic.