7 replies · opened Sep 13, 2017
My site displays fine on P.C's but not on android mobile-
background image not filling up screen properly on mobile - only fills about 1/2 way...
need a way to resize the background for mobile and also resize the text for mobile.
Thank you
Before you had a chance to respond I think have worked out some of the issues. The background picture now loads correctly on android mobile - but the text overlay on the background picture does not. Please notice that the text is cut off on mobile but not on pc.
The revised page can be found at www.achieva.us/rtest2.html. How can I fix the text so that it loads correctly and is not cut off?
Thank you
LOL- I think I resolved the issue while waiting for a response. First I rewrote the code and eliminated most errors.
Then I added to CSS: font-size:4.5vh (using "vh" or "vw") so I am controlling the text as percentage of the viewing screen. Latest version of the Page is back at "achieva.us/colorius.html" Please let me know if my solution is correct. Text seems to be resizing now based on any viewing screen size as a percentage of the height.
Hello,
Thanks for your Patience!
While your Solution appears to be working perfectly fine, we would still suggest you to use the Responsive Class to make sure that the Text is resized perfectly on the Devices. Consider using the following code:
.device-sm #stroke { font-size: 24px; }
.device-xs #stroke { font-size: 22px; }
.device-xxs #stroke { font-size: 20px; }
.device-sm #stroke2 { font-size: 18px; }
.device-xs #stroke2 { font-size: 16px; }
.device-xxs #stroke2 { font-size: 14px; }This will Definitely work fine. The Responsive Classes are as follows:
.device-lg – Class for Large Devices >=1200px
.device-md – Class for Medium Devices >=992px to 1199px
.device-sm – Class for Tablets
.device-xs – Class for Landscape Mobiles or Phablets.
.device-xxs – Class for Portrait Mobiles
This will definitely work fine. Hope this Helps!
Additionally, also make sure that you are using the css/custom.css File to add any CSS so that you can update your Files easily.
Let us know if we can help you with anything else or if you find any further issues.
Thanks for the response.... please help me to understand why using .device-xs; device-s; etc. classes is a better solution than 4.5VH or 4.5vw?
It seems to me that using VH or VW is more precise than responsive classes as it relates to a percentage of the viewing screen. Example to my rational: my cell phone is 6" in height; my wifes is 5.3" in height.
Using the classes above they would both be XXS devices. One image would be slightly out of the viewing screens area as opposed to the others viewing screen. Both phones would not look exactly the same. But with VH the percentage of reduction in size would be exactly proportional to the viewing screen. Seems much more exact and eloquent to me, with a lot less coding. Or am I thinking about this incorrectly? You are the experts so please explain the benefits of the fixed responsive classes over flex % solution.
..and along with that thinking above - (I'm still pondering the logic of it to see where it is not applicable LOL).... Once I get the font to exactly the right size of the PC viewing screen that I think is the perfect look, (example 4% of the height) and I am very happy with the screen, because I used 4VH and 3VW - the font will look the same on EVERY screen no matter what size shape or version of modern IOS or Android. Or am I incorrect?
Hello,
We have gone through this very thoroughly and we completely agree with you! Your solution is much better than ours and we will implement this Template wide in Our Updates. Thank You so much for providing us with insights into this. We truly appreciate your contribution! :)
Please let us know if we can help you with anything else or if you find any further issues.
You are most welcome! I actually thought that I was thinking about it incorrectly and that there was something wrong with my solution. Glad it works!
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