Affinity theme page & panel width issues.

• 

  marymaude · Member · May 9, 2017 at 5:29 am

  • Copy link
  • Add topic to favorites

  I’m having problems working with page & panel widths. On the contact page itself the layout doesn’t work BUT on the front page panel the layout works just fine. Also, I can’t figure out why an empty space is either being added to the left of the first row of pictures or a negative space is being added to the left of the second row of pictures on the gallery page. I do have some CSS added but I’ve removed it and the problems remain. There is always the possibility that CSS is causing the problems as I don’t understand CSS very well.

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

• 

  dcoleonline · Staff · May 9, 2017 at 9:55 pm

  • Copy link

  I can’t figure out why an empty space is either being added to the left of the first row of pictures or a negative space is being added to the left of the second row of pictures on the gallery page.

  That does seem odd. I’ll ask the developers to look at the code in the theme that is causing this. For now, you can add this CSS to remove that margin so things shift back into place there:

  /* Remove left margin on gallery page */
  @media screen and (min-width: 68em) {
      .post-8905 img.alignleft.below-entry-meta{
          margin-left: 0px;
      }
  }

  I’ll have do some further investigation on the contact page issue.

• 

  marymaude · Member · May 10, 2017 at 12:13 am

  • Copy link

  You were so kind to add the “note” to the CSS – thank you! That’s pretty much the way I try and keep track of what any CSS is doing, LOL. I added your CSS and it worked. I’ll try messing around with the layout now that the margin is gone, yay. Thank you again!

• 

  marymaude · Member · May 10, 2017 at 12:22 am

  • Copy link

  I’m sorry. I wasn’t clear. You got the galley page working – thank you again! I’ll wait to hear if anything can be done for the contact page.

• 

  dcoleonline · Staff · May 15, 2017 at 5:53 pm

  • Copy link

  In this case, it may be better to put the images above the form. Right now, on narrower browsers, the layout breaks on the front page because it needs media queries to tell the image and form where to move based on various browser widths.

  I have some CSS for you but first, you’ll need to alter the HTML of the contact page to this:

  <p style="text-align: center;">con·tact/ˈkänˌtakt noun, a meeting, communication, or relationship with someone:</p>
  <img class="alignleft wp-image-8133" src="https://marymaude.files.wordpress.com/2017/04/contact.jpg?w=43" alt="" width="234" height="740" />
  
  [contact-form][contact-field label="name" type="name" required="true" /][contact-field label="email" type="email" required="true" /][contact-field label="comment?" type="textarea" "/][/contact-form]

  Next, you’ll enter this CSS:

  /* Float image and contact form left */
  .wp-image-8133,
  #contact-form-931 {
      float: left;
  }
  
  /* Remove negative left margin from image */
  
  #post-14724 img.alignleft.below-entry-meta {
      margin-left: 0;
  }
  
  /* Adjustments for wide screens */
  @media screen and (min-width: 1280px) {
  
      /* Make front page contact area wider */
      .affinity-front-page .site-content .post-931 .entry-content, .page-id-931 .entry-content {
          max-width: 1000px;
      }
  
      /* Make front page contact form wider */
      .home #contact-form-931 {
          width: 737px;
      }
  
      /* Make contact form wider on contact page */
      .page-id-931 #contact-form-931{
          width: 453px;
      }
  }

• 

  dcoleonline · Staff · May 15, 2017 at 5:56 pm

  • Copy link

  I went back and made a small correction to the CSS above, so be sure to look at the forum for the updated version.

  This changes the look of the form a bit, but it keeps the image on the left, and it should look better at various screen sizes without completely breaking as it does now.

• 

  marymaude · Member · Jun 5, 2017 at 5:14 pm

  • Copy link

  Good Morning!
  I am sorry for not getting back here to the forums faster. I don’t have an excuse except “life in general”. I added all the HTML & CSS as instructed and everything looks wonderful! You did a great job solving my problems! I think I will heed your advice and place images above any future forms, if necessary, just to try and keep things easy. Thank you again & blessings!

• 

  dcoleonline · Staff · Jun 5, 2017 at 8:43 pm

  • Copy link

  Happy to hear it!

  If you need further help with the site, just start a new thread. :)