danielwrobert

Forum Replies Created

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

  • Great to hear that the info was helpful.

    I totally understand your situation – best of luck to you! ??

    Hello, @jlharrisjr1990!

    There are a couple of challenges I see here.

    First of all, it’s not really ideal to rely on text in the images of these hero sliders. You end up in situations at various viewport widths where that text is bound to be cut off (which is what you’re running up against).

    There’s also the way this slider is working with the images vs what you are trying to achieve. The slider is hiding the img element and displaying the image source as a background image. So your attempt to adjust the background-size property is a sensible start. But, like you have already discovered, it’s not going to be very desirable on smaller viewports with the text, etc.

    Ideally, I’d recommend keeping the background images as images and removing the text/logos – possibly placing them in the caption or elsewhere.

    If this isn’t a possibility, you can try the following approach to override the CSS:

    @media (max-width: 580px) {
  .slider_hero .slider_item.slick-slide {
    background-image: none !important;
    height: auto;
    min-height: 500px;
  }
  .slider_hero .slider_item.slick-slide img {
    opacity: 1;
    min-height: auto;
    height: 250px;
    width: 100%;
    object-fit: cover;
  }
}

    In the above (admittedly hackish) snippet, on smaller viewports the img element will be displayed and the background image will be hidden (opposite of the current state). Then, instead of using background-size, we use object-fit to better size our image to the viewport width. In doing so, we also need to adjust the container size a bit (height, min-height, etc.).

    Note that this is just a starting point and you will likely want to make further adjustments. If you do go this route, you may also want to consider putting constraints around the line length of the caption to keep a more consistent height.

    Overall, there are some tradeoffs to make with what you’re trying to accomplish in the given site and I’m only basing this info with what I am seeing on the frontend. I’m unable to see what settings you have in place otherwise (theme code, backend configs, etc.).

    I hope this at least helps point you in the right direction!

    Hi @lostcrow,

    Storefront has been the flagship theme for WooCommerce for quite some time and still remains an important product for WooCommerce.

    With the direction that WordPress has been heading around the Site Editor and Block Themes, however, Storefront (being a Classic Theme) is currently considered to be in “maintenance mode”. This means it will be primarily supported under the following criteria:

    • critical priority bugs
    • high-priority bugs
    • compatibility with WordPress, WooCommerce, and other dependent extension changes
    • curated enhancement/feature improvements coming from Product Focus team (generally this will be very minimal)

    This may help to explain why you have not been seeing any new feature additions with the theme updates.

    If you decide to look for a new theme, I would recommend going with a Block Theme.

    Hi!

    I’m glad to hear you are able to move forward. If the issue seems to be specific to the Storefront theme, please feel free to create an issue on the theme’s repository (with steps on how to reproduce) and we can have a look at resolving it!

    Hi, @sensolern!

    It seems like we may be talking about two different things. To clarify, are you trying to modify the <title> tag in your site? Or are you trying to add an <h1> heading to the home page?

    I do see a <title> tag being rendered three times on your site – once in the <head> of the document, where it should be, and another two times in the <body> (along with a bunch of other meta tags that should be in the document head). As seen in the screen recording of the developer console below, the third <title> element is outputting an error from the head.php file.

    [video src="https://cldup.com/gPtmnRxC6v.mp4" /]

    You shouldn’t need to add anything to the head.php file. I would suggest removing your changes there, as that seems to be part of the issue. Also, the title output is handled elsewhere in the theme.

    I also notice that your are using the Yeost SEO plugin. If you are having trouble updating the text that is being out put for the <title> you may want to visit their page for documentation and/or support.

    With regards to the <h1> tag, which you noted in your original message, what I was suggesting is to add a heading as an <h1> somewhere on your home page.

    I offered the (logged out) homepage on https://wordpress.com as an example – see the text “Welcome to the world’s most popular website builder.”, which is an <h1> heading. You have an <h1> being set on your internal pages, via the page title. But the home page does not have a <h1> heading and I assume this is what your SEO checker is referring to.

    I hope that helps to clarify things a bit further. Again, please feel free to reach out if you need further assistance!

    Hi @sensolern,

    Thank you for submitting this support request!

    The <title> tag that you are sharing above is metadata that lives in the <head> and does not require a wrapping <h1> tag.

    It looks like your internal pages are already using the page title as an <h1> tag, which is great!

    For your home page, I would recommend adding a descriptive heading as an <h1> element. You can see an example on https://wordpress.com (be sure that you’re logged out when viewing this page).

    I hope that helps and please feel free to reach out if you have any additional questions or clarifications!

    Plugin Author danielwrobert

    (@danielwrobert)

    Hi all,

    Thank you for reporting this issue. We have a fix in the works that we will be rolling out ASAP.

    Cheers!

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