Front page styling issue, CSS grid, Twenty Seventeen

  • I’m trying to change part of my front page to look like this CodePen: https://codepen.io/stephanie_ohanley/pen/xWNvbY?editors=1000#0

    Because the front page of Twenty Seventeen accepts more than one page, I created a page called Services. I formatted it with HTML but I’m having trouble styling it.

    When I added the CSS, the customizer rejected grid-template-columns, 1fr and the grid-gap properties.

    To get the content to display properly in three columns I believe I need to change the page to display as wide or full screen. To do this, do I need to create a separate template for that page?

    If I create a template, should I do it in PHP or create Gutenberg blocks with React JS?

    Is there a way to make that page only display as a full page using CSS only. I could do the three columns with Gutenberg or use the Custom HTML block. I’m not sure what the best approach is for this.

    Any advice appreciated!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Here is a suggestion:

    Use a child theme.

    Create a special template for the page you want with its special dimensions and styling.

    You can then call its own particular style sheet either as a <style> block or a link to another alt stylesheet.

    I hope this starts you on your way. However, I am not sure how the styling will work on the home page panels, as this is only a “thought experiment” as the physicists say.

    Thread Starter Stephanie O’Hanley

    (@stephanieohanley)

    Thank you. BTW, I am using a child theme!! I think I’ll create a special page template for the page.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Front page styling issue, CSS grid, Twenty Seventeen’ is closed to new replies.