developer-portal / website

Jekyll templates, CSS styles and images for the Fedora Developer Portal.
https://developer.fedoraproject.org/
GNU General Public License v2.0
41 stars 59 forks source link

Hidden text issue in mobile view #32

Open DimuthuLakmal opened 8 years ago

DimuthuLakmal commented 8 years ago

In mobile view some text are hidden in divs. I tried to correct it by changing css files. But i failed to correct it. Then i write some javascript code to detect screen width of the browser and change the layout according to it. Any other solution? screenshot from 2016-03-17 12-12-54 screenshot from 2016-03-17 12-41-28

asamalik commented 8 years ago

Hi, thank you for reporting. I like your proposed solution. If you manage to do that without javascript, I will be happy to accept your patch!

Example code for detecting screen width: (taken from our css)

@media all and (min-width: $screen-sm-min) {
  .title{
    #page-description p {
    font-size: 14pt !important;
    height: 115px;
    display: table-cell !important;
    vertical-align: middle !important;
    padding-top: 35px;
    }
  }
}

@media all and (max-width: $screen-xs-max) {
  .title{
    img.img-circle{
      padding: 3px;
      width: 50px;
    }
    h1 {
      margin-top: 40px;
      font-size: 1.8em;
    }
    #page-description p {
    font-size: 1em !important;
    height: 70px;
    display: table-cell !important;
    padding-top: 15px;
    }
  }
}
DimuthuLakmal commented 8 years ago

Successfully done :)

asamalik commented 8 years ago

Great!

However, I can not see your pull-request.

DimuthuLakmal commented 8 years ago

Hi, Sorry about the delay. I made a pull request.