Home Page header image size on desktop view

  • Author
    Posts
  • #162903

    africaebangles
    Member
    Original poster

    Hi,

    I really like how the home page looks when viewed on a phone but when I view it on a desktop I am worried that it hides all the info below it, so when people view the page some don’t realize that they can scroll down (I am one of these people :). I’d love to make the slider image area not as tall so that the top of the first featured page below shows when the homepage first loads (like it does on a phone screen). I have this CSS:

    .home-slider .slideshow .slides li.post {
    height: 620px;
    }

    but I only want it to change the home slider on the desktop view. When I add this CSS it completely changes the way the home page loads when viewed on a phone. How can I change this CSS so that the height is only reduced on the desktop view?

    The blog I need help with is: africaebangles.com

    #162924

    itsdavidmorgan
    Theme Author

    Hello,

    Try modifying the style to this:

    @media screen and (min-width: 1025px) {
      .home-slider .slideshow .slides li.post {
        height: 620px;
      }
    }

    That should apply the style only to desktop computers.

    Let us know if this works.

    Thanks!

    #162938

    africaebangles
    Member
    Original poster

    Hi David,

    Thanks so much for that CSS, we have just updated it as you suggested.

    Before you replied, we tried the following:

    .home-slider .slideshow .slides li.post {
    height: 600px;
    }

    @media handheld, only screen and (max-width: 1024px) {
    .home-slider .slideshow .slides li.post {
    height: auto;
    }
    }

    It worked but we noticed that our site icon was missing when the website is viewed on some browsers. Not sure if it was the previous CSS that we added that caused this dissapearing icon? We reloaded the icon in case that was the problem?

    We also recently upgraded to WooCommerce and are having an issue with our shop page.
    The shop page is not displaying the featured image and page title in the same way as the other pages that we published are. We are using a workaround where we set the header image in the cutomizer which is ok but still doesn’t look the same as our other pages. Is there a way to make the heading and title behave the same way on our shop page as they do on our other pages?

    Thanks for your help David. We really love your Purpose Theme!

    #162955

    itsdavidmorgan
    Theme Author

    Hello,

    No problem. Great to hear your enjoying the theme!

    Regarding the site icon, the previously provided style should not effect the site icon in any way. The issue is likely unrelated. Site icons can be a bit “sticky” when it comes to browser caching. It may take some time to see the site icon after a change, depending on the browser.

    Regarding the WooCommerce product pages, thank you for bringing this issue to our attention. We have pushed a theme update to resolve the issue. It may take WordPress.com a few days to approve the fix. I’ve tagged the WordPress staff in this response in hopes they’ll expedite the fix.

    Thanks!

The topic ‘Home Page header image size on desktop view’ is closed to new replies.