Homepage changes

  • Author
    Posts
  • #2704044

    hallluke
    Member

    I see the issue in Safari, the logo is warped on pretty much every screen.

    It still looks fine when I test at multiple sizes in FireFox on my desktop and the FireFox mobile app on my phone – perhaps this is a browser cache issue. Try refreshing/deleting your browser cache/close and reopening FireFox and see if it’s fixed then.

    I have no idea what the Safari issue is I’m afraid, it looks to be something to do with how the height is set on the image but I’m not sure how to address it, sorry.

    #2704045

    wbmedia94
    Member

    Okay thanks again for looking into this.

    Unfortunately I cleared my browser history and cache and it still looks stretched on my mobile.

    Bit disapointed with word press on this one. I can’t always expect my clients to look at my website on a particular browser or in a certain way. I expected it to function correctly as it does on a computer.

    It sounds like you have looked at all the options and spent some time on it so thank you for that.

    I will just have to keep playing around.

    #2704046

    hallluke
    Member

    What mobile OS and browser versions are you using? I’ll tag this for a member of staff to take a look as it seems the site logo gets squished even with your custom CSS turned off and there might be something they can “fix” in the theme files to stop this from happening. I suspect it’s not exactly a bug, just a design decision that works for some but not for you.

    The sheer number of combinations of browsers, versions and operating systems that all behave ever-so-slightly different makes web design a bit of a minefield. Add custom CSS into this and it gets really tricky. Hopefully there’ll be a solution that works for you though.

    #2704047

    purplesodaa
    Member

    hi i am having trouble with my homepage. i need to remove the white box right in the middle of my image. can you help me ? My blog name is purplesodaa.com

    #2704048

    hallluke
    Member

    Could you please start a new forum thread as your questions isn’t really related to this one and if we keep chatting here the other respondents will get notifications about our posts that they aren’t interested in.

    I’ll happily help you out once you start your own thread, although I don’t see a white box in the middle of the image on your homepage. Are you talking about a different site?

    #2704049

    wbmedia94
    Member

    My mobile is iPhone IOS 9.3.4, I’ve tried all the browsers – Google chrome, Firefox and Safari.

    It would be great if you could tag another member of staff for me. Let me know please

    Thanks.

    #2704050

    hallluke
    Member

    Oops, I thought I already had done. It’s tagged now so sit tight and a member of staff will get around to checking in due course.

    #2704051

    wbmedia94
    Member

    No worries.

    Thank you

    #2704052

    @wbmedia94, let’s make a slight adjustment to the code I gave you. This works on my iPhone 5s 9.34.

    .site-branding .site-logo-link img {
        max-height: 75px;
        height: 100%;
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    #2704054

    wbmedia94
    Member

    Unfortunately when I do that, it squashes my logo on my computer version!

    #2704058

    Hmmm, I’m not seeing any “squashing” of the logo on desktop with the above code, but I do see that it reduces the size of the logo. Let’s put the above code in a Media Query so that we can only apply it on 480px and narrower screens/windows.

    @media screen and (max-width: 480px) {
        .site-branding .site-logo-link img {
           max-height: 75px;
           height: 100%;
           width: auto;
           padding-left: 10px;
           padding-right: 10px;
        }
    }

    See what you think with this and let me know.

The topic ‘Homepage changes’ is closed to new replies.