3 Mobile Issues – swiftideas

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 8 replies, 3 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 9 posts - 1 through 9 (of 9 total)

Back to forum

Posted in: Dante
December 11, 2014 at 10:26 pm #135237

worldlystrategies
Member

Post count: 66

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.

December 11, 2014 at 10:28 pm #135242

worldlystrategies
Member

Post count: 66

Screen shots 5 and 6 weren’t able to attach in the last post so they are attached now.

Attachments:
You must be logged in to view attached files.

December 12, 2014 at 9:53 am #135316

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

Can you please provide me with a login so I can get passed the maintenance page

– Kyle

December 24, 2014 at 1:11 pm #137740

worldlystrategies
Member

Post count: 66

This reply has been marked as private.

December 26, 2014 at 2:23 pm #137875

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

Hi,

Can you check the user credentials didn’t manage to get in.
Thanks

-Rui

January 3, 2015 at 5:23 pm #138777

worldlystrategies
Member

Post count: 66

This reply has been marked as private.

January 6, 2015 at 2:11 pm #139377

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

Ok.. 1) I can’t seem to replicate this issue with the buttons on the home page, see: http://d.pr/i/10Bgx/4Eb4uKps

2) Which page is this so I can check?

3) Your screenshots clearly show that the background image for the title is shown on mobile too

– Kyle

February 26, 2015 at 12:09 am #153218

worldlystrategies
Member

Post count: 66

Hi Kyle,

1. Solved. Don’t worry.

2. The page is http://www.spottingcancer.org/cancer-signs-symptoms/

3. Solved. Don’t worry.

February 26, 2015 at 8:29 am #153283
Kyle – SUPPORT
Moderator

Post count: 35880
Delete all the spaces you’ve added around the word, this is never the way to achieve that effect.

Add this to your custom css:
```
.spb_content_element h3 > mark {
  width: 100%;
  display: block;
  text-align: center;
}
```
– Kyle
Back to forum

Posted in: Dante