Help with Mobile rendering and CSS

• 

  cage108 · Member · Feb 8, 2016 at 6:17 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I have put together a page with some CSS and a contact form. The page looks pretty much exactly how I want it to on a desktop, but when I open it on a mobile browser the contact form is cut off.
  This is the page and this is my CSS that I used. `.vpintro-box {
  float: left;
  margin-top: 10px;
  max-width: 500px;
  margin-right: -2%;
  }

  .vpintro-box .grey-box {
  float: left;
  font-size: 12px;
  background-color: #cccccc;
  padding: 2px 4px 3px 5px;
  line-height: 32px;
  color: #000;
  text-shadow: 0 0;
  border-radius: 12px;
  }

  .page-id-3445 .contact-form {
  padding: 20px;
  float: right;
  margin-top: 10px;
  max-width: 550px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  text-shadow: none;
  font-size: 16px;
  margin-left: 2%;
  }
  `
  I am using an iPhone5s and I have tried opening the page on the mobile safari browser as well as Opera Mini, both have the same issue.

  Any suggestions or guidance will be appreciated.

  thanks

  cage

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 9, 2016 at 4:09 am

  • Copy link

  Hi Cage, add the following to your custom CSS at the very bottom below any other CSS and see what you think.

  .contact-form input[type="text"], .contact-form input[type="email"] {
      max-width: 300px !important;
      width: 100% !important;
  }
  .contact-form textarea {
      width: 100% !important;
  }

• 

  cage108 · Member · Feb 9, 2016 at 6:53 pm

  • Copy link

  @thesacredpath Thank you … that worked like a charm. I wasnt sure if you meant at the end of the CSS related to that specific contact form, or at the end of the CSS in general so that it applies to all future forms as well… so I chose the latter and it is looking good. If you do see the page again, ignore the fact that it is overlapping with the footer now… having some other issues which @cbavota is assisting me with.

  Thanks again… very appreciative.

• 

  thesacredpath · Member · Feb 9, 2016 at 9:07 pm

  • Copy link

  You are welcome. On some things, such as with the contact form change, I will suggest adding it at the very end to make sure that something else in the CSS doesn’t override our changes. Glad things are getting sorted out.

• 

  cage108 · Member · Feb 17, 2016 at 8:17 pm

  • Copy link

  @sacredpath Thank you for the help above… I have had to start another thread with the other problem I mentioned above. If you have an opportunity I would appreciate any input. Many thanks, cage
  second thread