Jump to content

Custom CMS Block on mobile not fully showing


Recommended Posts

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.

 

 

post-1267694-0-66884000-1467551048_thumb.jpg

Link to comment
Share on other sites

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 by endriu107 (see edit history)
Link to comment
Share on other sites

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...

post-1267694-0-06511200-1467562793_thumb.jpg

Edited by Urbanbria (see edit history)
Link to comment
Share on other sites

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; } }
Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...