Hi Dante,
I am having some difficulties when viewing my desktop work on a mobile phone. I have 3 issues I can’t figure out.
1. Button Text Not Responsive
– Screen shot 1 (screen-shot-1.png) shows the button on a desktop
– Screen shot 2 (screen-shot-2.png) shows the button on a mobile phone (wording is cut off)
How do I fix this issue? Do I need to limit my button text to a certain amount of characters so it won’t get cut off on mobile devices?
2. Text Color Highlight Not Responsive
I want the text to be in the middle of the section and have equal parts of color on both sides so that each purple section goes all the way across the whole section.
You can see that this works on a desktop (sceen-shot-3.png) but then doesn’t work on a mobile (sceen-shot-4.png).
The way I coded this purple area was to write the following in CSS first:
mark {
background-color: #663090;
color: white;
font-weight: bold;
}
Then I wrote this in html for each line:
<h3><mark>CHANGES IN FINGER NAILS</mark><h3>
Then if the text didn’t go all the way over I would add spaces like this in the html:
<h3><mark> CHANGES IN FINGER NAILS </mark><h3>
I am thinking now that this is NOT the right way to do this.
Could you please advise so that it looks nice like this (sceen-shot-3.png on desktop) and not like this on mobile (sceen-shot-4.png)?
3. Fancy Alt Background on Title Not Showing Up on Mobile
– screen shot 5 (screen-shot-5.png) shows the alt background on desktop (There are flowers that are gray and white)
– screen shot 6 (screen-shot-6.png) shows the fancy alt background not showing up on mobile
Attachments:
You must be
logged in to view attached files.