View on Mobile Not Displaying Correctly & X Icons Have Changed Since Update!

Support
#1

Hi, there are a couple of issues I’m having on a site I’m working on and I’d be grateful if you could help please!

  1. When I view the site on a mobile, the slider and text under it are starting at the very top of the screen instead of under the nav bar and I don’t know how to change it so it starts further down. I’ve included a screen grab below.
    https://www.ukcaringservices.co.uk/our-services/

  2. After updating to the latest Cornerstone and X Theme, the X Icon shortcodes aren’t displaying how they have been. The phone icon is facing the opposite way and the mobile icon hasn’t got a screen! Please see the top bar on the website.
    https://www.ukcaringservices.co.uk

Thanks!

#2

Hi There,

Thank you for writing in, What CSS did you applied to make the slider overlay on the header? I can’t seem to figure that out. Anyways please review that custom CSS and wrap it to a @media (min-width: 768px) query, so it does not affect the mobile view.

e.g.

@media (min-width: 768px) {
	/*DESKTOP SPECIFIC CSS HERE*/
}

Regarding the icons, please clear all the site caches (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Cheers!

#3

Hi, thanks for the info! With regards to the CSS, it was supplied by yourselves on a separate post a couple of weeks ago and it was supposed to just effect the Home page slider!

I’d already cleared the cache after doing the update, but the icons are still displaying incorrectly.

Thanks!

#4

Hi @core365,

Just for clarification, are you expecting different icons? Because they are just displaying fine on my end and in your screenshot. The font awesome library is updated and the icons are being pulled from that updated version.

About the header and slider, I don’t think it’s just to take effect the home page slider, you have this CSS

@media (min-width: 768px)
.page.x-navbar-fixed-top-active:not(.home) .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}

Which is note home page (:not(.home)). And this too,

.x-topbar {
    position: fixed;
    width: 100%;
    min-height: 35px;
    height: 40px;
    text-align: center;
}

And that too affect all pages including home page, and it positions the top bar in fixed positioning which affects the offset of slider (being covered of the half of the header). How about removing those CSS first and test it? Please backup your CSS too before the removal.

Thanks!

#5

Hi, the screenshot I supplied shows the phone icon facing the wrong way and there isn’t a screen on the mobile icon. Since then someone answered my other post which I asked about the icons for another website I’m working on as I had a few other issues I was asking about also, so I took the CSS which they gave to sort out the icons. I was told that it could be related to the latest theme update. What you can view is the correct icons which use the CSS fix for them! I thought the X Icon shortcodes were separate to font awesome, as I was told at some point last year by yourselves, to use the shortcodes instead of font awesome when it’s used within text, as the icons weren’t displaying! It’s getting very confusing and it puts me off updating all past versions of X Theme and Cornerstone as each time there’s an update, I usually end up spending time trying to figure out how to correct things and asking for help from yourselves!

Thanks for the info about the CSS with the slider, but at the minute it’s all working as it should be, so I’m feeling inclined to leave it as it is, otherwise I’ll probably cause more issues.

Thanks!

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.