Image not displaying correctly on Mobile Phone

BB Theme
1

Hi there

Can you take a look at the following site

http://workskills.breakawaycreative.com.au/

For some reason the main banner image isn’t displaying correctly on a mobile phone.

Its basically 2 columns with a text module on the left and I’ve just kept the right hand black and just used a background image to create the banner. When viewed on a phone it doesnt’ show all the text in the left hand column.

Also, the 3 tiles below the banner are each made up of an image and a button with -2 pixels spacing on top to keep them together. When viewed on a mobile phone however, it adds a gap between the image and the button which looks odd.

What do I need to do to fix these issues.

Kay Shanley

2

Hey Kay,

That’s because the words are joined together by a non-breaking space. Normally, the browser should have broken the words into 2 lines, but the browser is considering them as one word because of the non-breaking space. Try removing the spaces before each of the second word and replace them manually by hitting the space bar. Take a look at the screenshot below for reference.

View post on imgur.com

Ben

3

I’ll try it but it needs a space there. Would I be better to create an image with a transparent bg instead of using text?

Can you also look at part 2 of my question regarding the buttons in the column below.

There are three columns, each with a picture and a button below them. I put a -2 space above each button so that they touch the photo above, but when viewed on a mobile phone it adds a space and looks really odd.

Kay

4

Hi Kay,

For the space issue, you will want to do as Ben suggested and create your pace using the space bar.

For the three columns, can you try adding the CSS below and see if this resolves your issue.

@media (max-width: 768px) {
  .fl-node-56eb610328181 .fl-module-content {
    margin-top: -2px;
  }
  .fl-node-56eb6511df54c .fl-module-content {
  margin-top: -2px;
  }
  .fl-node-56eb65280a45f .fl-module-content {
    margin-top: -2px;
  }
}

Thanks,
Danny

5

Hi guys

The columns issue is now fixed, thanks, however, the banner image at the top doesn’t appear to have a ‘&nbsp’ space, see below:

<h1 style=“text-align: center;”><span style=“font-size: 85px;”><span style=“color: #ffffff;”><span style=“font-size: 70px;”>RIGHT</span> People</span>
</span></h1>

There is no ‘&nbsp’

6

Just another observation on the mobile phone version, it seems to throw in a lot of extra space above columns and between modules etc.

eg. under the header bar on each page, there is a huge gap on the mobile phone version before the main body of the page starts. Much more than appears when viewed on a laptop or large computer screen?

Is there a reason for this?

Kay

7

Hey guys, sorry about the long dialogue.

I decided to create an image instead of using text for the header, it works.

If you could just resolve the spacing issues on the mobile phone version that would be awesome.

Many thanks for your help.

Kay Shanley

8

Hi Kay,

Regarding the spacing, would it be possible for you to provide a concept image how you would like your layout to look on mobile devices, please?

Thanks,
Danny