Some minor tweaks required

  • Unknown's avatar

    I would like to remove the blue bar on the Home page and make sure the site looks good on all platforms (mobile, iPad etc)

    I would also like to reduce the size of the Header Images in the Portfolio and Contact page. I’ve also noticed that the pricing page doesn’t have an image, and I guess I would like some consistency. It would be nice if the text for each page was more embossed, though, to make it easier to read.

    Finally, I really like the mobile layout on iPhone (sans the blue bar under the page title), and I’d like to replicate that trimmed down effect on the desktop version.

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi there, to remove the blue bar and title on the home page, you can use the following CSS.

    .home .hero {
        display: none;
    }

    For the featured image on the Portfolio page, give the following a try and see what you think. The top padding controls the spacing between the very top of the window and the title, and the bottom margin the spacing below the title, effectively controlling the height of the image. You can play with and adjust as desired.

    body.hero-image .hero.with-featured-image {
        padding-bottom: 100px !important;
        padding-top: 300px !important;
    }

    On the Portfolio page, and all pages that have featured images, we can use the following to give the text a slight text shadow to make it more readable. The first value is the horizontal offset for the shadow, the second, the vertical, and the third value is the “blur” radius.

    .hero .page-title {
        text-shadow: 2px 2px 5px #000;
    }

    Finally, I really like the mobile layout on iPhone (sans the blue bar under the page title), and I’d like to replicate that trimmed down effect on the desktop version.

    Are you wanting to have the touch device menu (3-bar icon and Menu) show on desktop also? If I’m not understanding, please let me know.

  • Unknown's avatar

    Hey, first of all, thanks so much for your help! I couldn’t seem to get the text shadow to work, but I’ve since settled on getting rid of it anyway. As for the trimmed-down effect, I just meant the images, which you already solved, so thanks!

  • Unknown's avatar

    Never mind! I managed to fix it. I’ve kept the graphics for the contact and portfolio page! Awesome.

  • Unknown's avatar

    Hooray and you are welcome!

  • The topic ‘Some minor tweaks required’ is closed to new replies.