I need help with 2 issues.

1. On the Contact page, Basic's default settings/config yields a broken looking display on a mobile phone when in portrait / vertical mode: header & content uses less than 3 of the 4 available columns - even when there's no sidebar-second and all blocks have been removed from the Contact page. Everything is ok & behaving as expected when in landscape mode.

2. On all pages that have blocks in sidebar-second, same issue in portrait mode (less than 3 columns is used by header and content) while all is well in landscape mode.

It's along way home... ;-)

Capture of contact page

CommentFileSizeAuthor
#6 unresponsive_contact-2642592-6.patch618 bytesjoelpittet
Basic-contact-page.jpg78.97 KBbisonbleu

Comments

bisonbleu created an issue. See original summary.

bisonbleu’s picture

bisonbleu commented
Title: help with breakpoints on Contact page when in portrait mode on a mobile phone » Unresponsive Contact page header when in portrait mode on a mobile phone

I used Safari in an iPhone 6 to produce the captures if that makes a difference.

bisonbleu’s picture

bisonbleu commented

I only see this issue appearing on pages where there's a form AND a textarea field e.g. the Contact form and Add a comment form.

I've tested the User login block, which doesn't have a textarea field, and it behaves normally in both portrait and landscape modes.

Could this be a bug?

leahtard’s picture

leahtard commented

Without seeing the code, I suspect the input fields have a width defined in pixels that exceeds the width of the viewport. I have encountered this before. If you are using Sass & Bourbon, here is some code I typically add to all of my projects. It is very much inspired by the Bourbon Bitters forms styles:


#{$all-text-inputs},
textarea,
select[multiple=multiple]
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  @include box-sizing(border-box)
  @include transition(border-color 0.1s ease-in-out)
  background-color: white
  border-radius: 3px
  border: 1px solid #CCC
  margin-bottom: $margin/2
  padding: $padding/3
  width: 100%

  &:hover
    border-color: #999

  &:focus
    border-color: #000

Translated into CSS if needed:


input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"],
textarea,
select[multiple=multiple] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color 0.1s ease-in-out;
  -moz-transition: border-color 0.1s ease-in-out;
  transition: border-color 0.1s ease-in-out;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  padding: 6.66667px;
  width: 100%;
}
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover,
textarea:hover,
select[multiple=multiple]:hover {
  border-color: #999;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus,
textarea:focus,
select[multiple=multiple]:focus {
  border-color: #000;
}

I have been thinking we needed some better form base styles for forms. I will look into this and get something committed.

Cheers, Leah

bisonbleu’s picture

bisonbleu commented
Component: Documentation » Code
Category: Support request » Bug report

Hey Leah, thanks for your new-year post :-)

Confirming that adding your code to _custom.sass fixes the Contact page header issue.

By the way, here's how to reproduce this issue: install Basic in a vanilla Drupal on simplytest.me, enable the Contact module and add a Contact link to the Main menu.

I'm still having similar issues (header width in viewport) with pages where the Add new comment form is displayed. But I now think this is unrelated because the width of the header varies quite a bit from page to page.

See related issue: https://www.drupal.org/node/2643324

Thanks again for your help!

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Status: Active » Needs review
StatusFileSize
new unresponsive_contact-2642592-6.patch618 bytes

@leahtard You may have a solution for this already but here's a patch in-case this works better.

  • leahtard authored ce28d6e on 7.x-4.x 
    Issue #2642592 by joelpittet, bisonbleu, leahtard: Improved responsive...
leahtard’s picture

leahtard commented
leahtard’s picture

leahtard commented

The max-width on the input field has now been committed along with some other improved base styles. This has also been applied to the 8.x branch.

Cheers, Leah

leahtard’s picture

leahtard commented
Status: Needs review » Closed (fixed)

Fix committed to 7.x and 8.x branches. Closing this one :)