opensourceforwomen.org icon indicating copy to clipboard operation
opensourceforwomen.org copied to clipboard

The homepage content is not responsive on ipad

Open rsip22 opened this issue 7 years ago • 2 comments

The navbar is correct (and stays in place), but the rest of the body (the content and the footer) require to horizontally scroll to read the text on the homepage.

rsip22 avatar Feb 11 '18 23:02 rsip22

Thanks for reporting this! Is this something that you’d be interested in fixing?

On Feb 11, 2018, at 5:50 PM, Renata [email protected] wrote:

The navbar is correct (and stays in place), but the rest of the body (the content and the footer) require to horizontally scroll to read the text on the homepage.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/CoralineAda/opensourceforwomen.org/issues/52, or mute the thread https://github.com/notifications/unsubscribe-auth/AABXDM2gvKoXJNVkYb4fEYF6UqEnnV93ks5tT3yvgaJpZM4SBkX0.

CoralineAda avatar Feb 12 '18 00:02 CoralineAda

Hi!

It took me a while to get back to this. I would be interested in trying to fix it, yes, but sadly twice I couldn't get the project to run locally. This last time, I got a strange error on Fedora (strange for me, who has no experience with Ruby development) when running bundle install:

Fetching gem metadata from https://rubygems.org/..../home/user/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/bundler.rb:418: [BUG] Segmentation fault at 0x00000000000059

So, I can only try to help with this:

  • This happens in every page;

  • The classes on the text "Open source is the foundation..." are correct, since they do create only one column for the text on mobile.

From what I read of the code, I'm guessing the problem is not in the templates per se (like missing a class or something), but on the following lines in layout.scss, because they seem override the responsiveness of the Foundation framework and to create the weird horizontal scroll on mobile (that don't show because overflow: hidden):

#featured-content {
  width: 100%;
  overflow: hidden;

And on:

.footer-row, .push {
  width: 100%;
  overflow: hidden;

Still, I may be wrong, so someone who is more familiar with Foundation and front-end than me might want to tip in.

rsip22 avatar Feb 11 '19 03:02 rsip22