Custom CMS Block on mobile not fully showing

[Urbanbria]

Hi Guys,

 

I can't seem to find an answer to this, anyone have a solution?

 

The custom CMS info block doesn't fully show on a mobile screen, it just cuts off?

I am using the default theme and using PS 1.6.1.5

 

Thanks in advance for any solution.

 

 

[Urbanbria]

... I should add that I've disabled the FB like module and I have tried resetting the custom CMS module, but the problem is still there.

[endriu107]

Could you share url to your shop?

[Urbanbria]

HI. I am in the middle of doing a complete new installation, if the problem remains I will report back with a link.

Thanks

[Urbanbria]

No need for a fresh installation... PS own demo is showing the very same problem?

 

 

Edited July 3, 2016 by Urbanbria (see edit history)

[endriu107]

I think problem is because in global.css there is defined hight and overflow is hidden, you can try change:

#cmsinfo_block {
    overflow: hidden;
    background: #f2f2f2;
    min-height: 344px;
    height: 344px;
    padding-right: 29px;
    padding-left: 29px;
}

to:

#cmsinfo_block {
    overflow: auto;
    background: #f2f2f2;
    min-height: 344px;
    height: 344px;
    padding-right: 29px;
    padding-left: 29px;
}

also you can change hight to different value like 400px. Edited July 3, 2016 by endriu107 (see edit history)

[Urbanbria]

Endriu107, thank you for your help.

Your solution just gave me a scrollbar within the Custom block.

 

I changed overflow: hidden; to overflow: none; and this has half solved the problem.

Although the full block is now visible on mobile, the background colour stops half way, and I can't figure where to look in the CSS?

 

If worst comes to the worst, I can always change the BG colour to white...

Edited July 3, 2016 by Urbanbria (see edit history)

[endriu107]

Background height is the same like your height value.

[Urbanbria]

Okay, after messing around with the CSS, it now works in mobile, but the background colour disappears. It is visible on desktop screens, but for mobile it is white? Not a major problem, thanks for pointing me in the right direction.

 

Here is the code I have used if anyone else needs help doing it:

#cmsinfo_block {
  overflow: none;
  background: #f2f2f2;
  min-height: 344px;
  height: 344px;
  padding-right: 29px;
  padding-left: 29px; }
  @media (max-width: 991px) {
    #facebook_block,
    #cmsinfo_block {
      min-height: 354px;
      height: auto;
      padding-left: 13px;
      padding-right: 13px; } }
  @media (max-width: 767px) {
    #facebook_block,
    #cmsinfo_block {
      width: 100%;
      min-height: 1px; } }

[Urbanbria]

Background height is the same like your height value.

I tried to change it to "auto;" and a different value, but it remained the same? Very odd...

[benzachar]

I think problem is because in global.css there is defined hight and overflow is hidden, you can try change:

#cmsinfo_block {
    overflow: hidden;
    background: #f2f2f2;
    min-height: 344px;
    height: 344px;
    padding-right: 29px;
    padding-left: 29px;
}

to:

#cmsinfo_block {
    overflow: auto;
    background: #f2f2f2;
    min-height: 344px;
    height: 344px;
    padding-right: 29px;
    padding-left: 29px;
}

also you can change hight to different value like 400px.

 

Hi guys,

 

I face the same problem on my website...

I tried the solution in this thread:

- I found out that overflow:none; doesn't work for me. The result is the same as overflow:hidden;

- I tried overflow:visible; but the display is not good on desktop (the block in the middle is on top of the right block).

- So I used overflow:auto; and got a scrollbar. I tried to change the height, but it doesn't change anything on the mobile view, it just increases the height on the desktop version.

 

Is it possible to get rid of the scrollbar and have a good display on desktop too?

[Natalia]

Hi, I had the same problem. I solved it removing "height: 344px;" from ·cmsinfo_block, you have to keep min-height property.

Remember remove it from @media too.

It works fine for me, although Facebook block on the left size keeps the previous height (obviously). I'll probably hide that section.

PS: I keep overflow:hidden;

 

I hope it helps