[Support request] Modify Homepage and Categorypage Pixel theme

Home Forums Support [Support request] Modify Homepage and Categorypage Pixel theme

Home Forums Support Modify Homepage and Categorypage Pixel theme

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1264654
    Tonnie

    Hi, I’m using currently the GP Premium theme Pixel.

    I would like to lower the text at the homepage.

    I know I have to edit this text in the element section. But when I put the code into this it will lower the text AND the image. I just want to lower the text without touching the image. Can you tell me the best way to solve this?

    There is another thing that i’m struggling with. I would like to remove the 2nd bar on a category page. For example I would like to remove the bar for “surfing” on the URL with /surfing/.
    To be clear: i want to remove the bar with the beach/sand as an background. Can you explain me how to do this?

    Kind regards,
    Tommie

    #1264720
    David
    Staff
    Customer Support

    Hi there,

    1. you can lower the position of the text by editing the Header Element and reducing the Bottom Padding. Whatever you deduct from the bottom padding you can add to the top padding to keep the Element the same height and the image intact.

    2. in Appearance > Elements you will see a second Header Element that is set to Display on Pages – you can simply delete that header element.

    #1268410
    Tonnie

    Hi David,

    Thanks for your help!

    1. I have lowered the position on the text of the homepage. Now the text won’t be shown fully on mobile. Als the width of the page is too large for my screen. How can I solve this?

    2. Perfect! I’ve removed the background image and it will now show only a color. Just as i wanted, thanks!

    #1268598
    David
    Staff
    Customer Support

    1. You can set different Padding for Desktop and Mobile – just select the device icon to change them independently.
    Width – thats an issue with having really long words.
    Option 1:
    Reduce the Header Elements – Left and Right Padding for Mobile to free up more space and reduce the font size in this Customizer > Additional CSS:

    @media (max-width: 768px) {
        h1.hero {
            font-size: 33px;
        }
    }

    Option 2:
    Add this CSS to break the words when space is minimal:

    h1.hero {
        word-break: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.