Button Font Displaying Incorrectly on Mobile

Support
#1

Hello, I am in the process of building a website. I have used some custom CSS to style my buttons. In particular, customizing the font, removing the drop shadow, and adjusting padding of my buttons. On my homepage their is a pink button that reads “Get Started” It displays correct on desktop and mobile. However, if you visit a second page of my site, the same pink “Get Started” button looks how it should on a desktop, but on mobile, the font defaults from Oswald (which is what I have it set to) to Verdana or some serif font that I have not assigned.

Why would the customized button display correctly on my home page across all devices but differently on a second page on a mobile device?

Here is my CSS used to customize my button:

.x-btn {
font-family: Oswald;
font-size: 140% !important;
padding: 15px 40px 15px 40px !important;
}

.x-btn, .x-btn:hover, .button, .button:hover, [type=“submit”], [type=“submit”]:hover {
text-shadow: none;
}

#2

Hey @NickMacedo,

We need the page URLs so we could check why your CSS is only working on home page. There’s must be something overriding the styles in your second page.

Thanks.

#3

sure thing! sent in secure note.

#4

Hello There,

Are you referring to this button?

Please edit this page back in Cornerstone. Click the button and make sure that Block option is disabled so that your button will look like a normal button.

Hope this helps.

#5

It did not help. I tried it without the block setting the the problem persists. Besides, I would like the button to be full width on this page so the block setting is necessary. It doesnt just effect the pink button on this page, there is a black and white button below the hero banner on the second page that is not showing correctly as well.

Im not sure why it displays on the homepage correctly but not on the secondary page. I also, for the heck of it, tried making the button on the homepage a full block and it maintained the correct font on mobile. So it would appear the issue is not related to the block the block setting.

Please see link for explanation of issue.

#6

Hi,

You can try adding !important

eg.

.x-btn {
     font-family: "Oswald", sans-serif !important;
     font-size: 140% !important;
     padding: 15px 40px 15px 40px !important;
}

.x-btn, .x-btn:hover, .button, .button:hover, [type="submit"], [type="submit"]:hover {
     text-shadow: none;
}

Please make sure to clear your mobile browser cache after adding that code.

Thanks

#7

Thanks Paul but I already tried both of those to no avail.

The issue seems to be a defect in Cornerstone- I tried setting up a brand new page to see if the issue was present on a new page. It was not initially. The button worked how it was supposed to. Until I duplicated a Classic Custom Headline. Once I duplicated it the duplicated headline lost its class I had assigned for responsive text purposes and the button lost its custom formatting. Once the headline has been duplicated I cannot undo the damage without building the page entirely from scratch again. I even tried copying the page layout as a template and applying it to a new page, thinking the glitch would not migrate over with it. But it did.

I also tried this on another site I manage and the issue was the same their. All the same scenario and circumstances.

Any suggestions? It would be pretty terrible to have to rebuild pages because of a glitch in cornerstone.

Thanks for the help!

#8

Hey @NickMacedo,

The Oswald font is loaded in your home page and not in your secondary page that is why the CSS won’t work. I’m not sure why the font is loaded inside your the column.

To load or use extra Google fonts site-wide, you need to enqueue them. Follow this tutorial.

You said, this is a bug in Cornerstone. Would you mind giving us the exact steps so we could replicate the issue? If you could give us a screen recording, that would be great.

Thanks.

#9

Thats weird. I’ll give the link a shot. Not sure why it would only disappear on mobile since it still works fine on Desktop.

I can’t screen record since the issue is taking place over two devices and it wouldnt show any continuity.

Here’s my exact process though.

  1. Duplicate my home page, which is the page the button CSS is currently working on. Im using the duplicate post plugin. I tried creating a new page but the results are not duplicated this way.

  2. I adjust my row to have two columns. Then I select the headline I wish to duplicate and use the cornerstone duplicate feature to copy the headline. When I do this, the headline duplicates but does not maintain the responsive text look that I have assigned it. In this case, the text defaults to something smaller. It still maintains the class setting I assigned in “Customize” section of cornerstone but does not maintain the look. If I save the page and then refresh it, the duplicated headline now shows the proper formatting. But at this point, the button CSS no longer works on mobile.

  3. I visit my mobile browser, flush the cache and refresh the page the button in Cornerstone no longer has the font “Oswald” assigned to it. It does, however, maintain the Oswald font on desktop.

#10

I enqueued the fonts as recommend but it still did not work.

#11

I was able to enqueue using a modified method I found on the site of the method you sent. Thanks!

#12

Hey @NickMacedo,

The duplication issue might have stemmed from the use of the duplicate post plugin. You should not duplicate page or post that way because the builder’s data is tied to its own post so the duplicated post will have missing items.

X / Pro will have a Template Manager soon so you don’t have to use the duplicate post plugin.

Thanks.

#13

That is great news about the template manager. Although, in this case, I’m not sure if duplicate post would be the culprit or not . I was experiencing the same issue when creating a new page from scratch. In fact, I can only get the button to reflect correctl when I duplicated the working homepage. That was, before I actually made any changes to the duplicate pages self of course.

Thanks for your help though as everything seems to be working now .

#14

You are welcome!

#15

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