[Solved]Custom Cms Block Not Responsive

[KathleenUK]

When trying the responsivity of Custom cms info block, the  facebook block shows but the about section of cms infoblock gets cut off on the small screen..

 

The overflow is hidden but when I set it to auto I get a scrollbar. How can I adjust the size of the box so the overflow shows nicely and it all stacks properly?

Edited January 15, 2016 by KathleenUK (see edit history)

[Daresh]

CSS help is so much easier when we can take a look at the live site

[KathleenUK]

Thanks for reply . I was hoping to leave it in maintenance mode as I'm still working on it but here it goes http://www.kathleennatural.co.uk/shop/

[Daresh]

Those blocks have fixed height, ex.: height: 344px; Try to remove it and leave only the min-height rules

[KathleenUK]

I can't find any values for height or even min-height. Is it in global.css footer container section or somewhere else?

[Daresh]

Hard to tell, your css is cached, turn it off and it will be easier to inspect.

Edited January 15, 2016 by Daresh (see edit history)

[KathleenUK]

Turned off smart cache for css, anything else?

[Daresh]

In global.css, rules for #cmsinfo_block

[KathleenUK]

SOLVED! It works! Thank you !! Just had to adjust min height so there's no gap at the bottom of facebook block column. For anyone that might need it it's in there:

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