Canvas Support

Some text is not appearing correctly when viewed on mobile.

12 replies · opened Sep 4, 2021

TtshurtsSep 4, 2021

I have an issue with the Freelancer version, where some of the text is missing in one section. I don't know what is causing it. I'm including screenshots to show what I mean.

SSemicolon WebSTAFFSep 4, 2021

Hello,

Can you please let us know which Device you are checking this on so that we can try to check and replicate this to find the solution.

Also, do you see this happening on the Live Previews: http://themes.semicolonweb.com/html/canvas/demo-freelancer.html as well?

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

TtshurtsSep 5, 2021

Hi,

I'm seeing that on an iPhone 7. The Live Preview looks fine and it also looks fine on my girlfriend's Oppo 9.

Thanks

TtshurtsSep 6, 2021

Hi, I fixed a couple of the errors but it still looks the same. Other errors don't make any sense to me. This error which appears twice, Error: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

From line 91, column 10; to line 91, column 79

Is related to this:


									
									Web Designer
									Problem Solver

This is your coding, so how do you propose I change that without destroying the effect?

Thanks

SSemicolon WebSTAFFSep 6, 2021

Hello,

The HTML Validation Errors except the Unclosed HTML Tags and Duplicate IDs can be ignored. Meanwhile, for the issue with the Gradient Text, this occurs only on Safari Browsers. To fix this issue, simply add the following CSS Codes:
[ch_pre type="css"].gradient-text {
-webkit-box-decoration-break: clone;
}[/ch_pre]

This should definitely fix your issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TtshurtsSep 7, 2021

That worked! Thanks!

TtshurtsSep 7, 2021

I'm sorry to have to open this back up again but the fix created another problem. The custom CSS did indeed fix the problem on mobile. But it also "broke" the design for the hero section on desktop, spreading out the text too much vertically. I'll include a couple of before and after screenshots.

The strange thing is that it looks like it did before when I preview my html from the editor, but on the online version it's changed. I've removed the CSS from the online code but it won't go back to normal. Of course, I've reloaded the page multiple times and looked at it on multiple browsers, but it's still broken. Any idea of what is going on?

SSemicolon WebSTAFFSep 7, 2021

Hello,

Screenshots will be very helpful. Additionally, please note that Safari currently has bug displaying Texts with Gradient Colors when they are on Multiple Lines.

Also, could you please let us know which File you have added the CSS Code in so that we can check and verify what is causing this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

TtshurtsSep 8, 2021

I'm sorry, I did choose the screenshot files to upload to you. On review, it looks like they were over the 2MB limit. I guess that's why you didn't get them. I'll compress and try again.

Good thing to know about Safari.

I had added the CSS to the custom.css file, but like I said, I removed it but the change in appearance is still there for some reason.

Thanks

SSemicolon WebSTAFFSep 8, 2021

Hello,

Thanks for your Patience!

We have checked this out and this is actually not an issue with the CSS Code we have provided you with but we saw this the first time we checked your Website. It's not an issue but how actually the Carousel works. One of the Words in the Carousel is a Multi-Line word which is why it is vertically stretched. Consider making the Text a Little smaller so it is more readable and matches with the Typography and also fixes this issue. The following CSS Code appears to be working best in all Screen Sizes:
[ch_pre].emphasis-title h1 {
font-size: calc(6.82629vw + 12.9014px) !important;
font-weight: 900;
}[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TtshurtsSep 8, 2021

Hi, I'm sorry to disagree with you but the CSS code you gave me before, to fix the issue on mobile, definitely changed the look of the Hero section. It's quite obvious if you look at the screenshots. You did get those didn't you? The one that says localhost in the URL is the way it originally appeared online, and still appears that way when I look at it in the code preview.

Nevertheless, I added the code above to the custom.css file and it made no difference whatsoever.

SSemicolon WebSTAFFSep 8, 2021

Hello,

Thanks for your Kind Patience. We have noticed a Few Things:

  1. Please move the css/custom.css File Linking after the demos/freelancer/freelancer.css CSS Linking in the Document ``. (This is our mistake and we will fix this in the next update, we really apologize for the Inconveniences caused due to this)

  2. Change all the http:// in your URLs to https:// on your Page.

This will definitely fix the issues. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard