Having difficulty with some titles in the storefront theme

Hi there @katherinemasters,

I think I see what you are talking about, I see the page title “Home” when resizing my browser window.

Can you first tell me how you’ve built the homepage? I ask as I have a page using the full-width template and blocks via the new block editor. I then don’t have the same issue with my page title showing. Any insight would be great, if you don’t mind sharing.

Hi Ryan,

Thanks so much for getting in touch. I am using Elementor to set up my pages on the storefront theme.

I currently have ‘default template’ set up for my home page. I’m quite sure I used some css to get the image to extend the way it is extending but can’t remember for the life of me what it is that I used now and can’t seem to find it my references to it.

If I were to change to block editor now after using Elementor it would be a bit risky, wouldn’t it?

Would love your feedback, thanks again,

K

Hi @katherinemasters,

Thanks for the clarification, I don’t think you need to (or want you to) switch from Elementor to using the block editor if Elementor is working for you!

When you are editing that page, does it happen to give you a section that looks like this? In the Document settings there is a Page Attributes section that lets you choose a template. I ask because I’ve recreated my own homepage in Storefront using blocks, and when I use the Full width template and set it as my front page in WordPress the page title is hidden automatically for me.

Link to image: https://cld.wthms.co/nYkNMl

BACKEND:

Link to image: https://cld.wthms.co/hwAp1C

FRONTEND:

Link to image: https://cld.wthms.co/Ofhpda

Perhaps Elementor takes over any of those options, but I was just hoping that we could get the same thing to happen. Regardless of that I think there is a slight CSS issue with the main cover image (not sure what Elementor calls it). Here are some tweaks to that in addition to removing the page title on the home page only.

.home .entry-header {
    display: none;
}

.home.page:not(.page-template-template-homepage) .site-header {
    margin-bottom: 0;
}

@media (min-width:768px) {
  .elementor-section.elementor-section-height-full {
    height: auto;
  }
}

Try that out to see if that was more what you had in mind.

Hi Ryan,

Thank you! You are a genius, it worked. I tried it all and now it’s working really well. Thanks so much for your in depth analysis. Much appreciated.

Thanks!

K