7

I'm using wordpress and I used CSS to make the width of my 'About' and 'Contact' page more centered and smaller by adding padding. However, when I do this, in the mobile view especially (I think tablet is okay), there is white space on both sides because of it.

The theme that I am using is built like that I think and I could not really find something in that theme that makes the elements appear smaller width and centered on the page so I used padding instead to make it appear the way that I want.

'Contact' page of my site in mobile view

'Portfolio' page of my site in mobile view

Here's a link to my website: http://www.lisaweng.com/contact/

Is there a CSS that makes those pages appear normal or full width when viewing on mobile view even if I add padding, like how the portfolio page views full width on mobile even though it has white space on both sides of the screen when viewed on the desktop version?

P.S. for the CSS for the padding of the 'About' and 'Contact' page elements, I did use percentages rather than pixels. I am not sure why it's not entirely responsive when viewed in mobile view.

Here's what my CSS looks like for the 'About' and 'Contact' page:

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

and

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

Is there a code to fix this? Or any idea why this is the case? If there is a code for the mobile view fix, is it going to be the same for tablet as well or does the tablet also have a CSS to fix the responsiveness to how it should be?

Mikhail Kholodkov
  • 23,642
  • 17
  • 61
  • 78
user124889
  • 79
  • 1
  • 1
  • 6

1 Answers1

11

Using @media queries to add breakpoints in CSS.

You need to utilise media queries within your CSS code to add specific breakpoints.

Adding this to your stylesheet may help:

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

Using the above code adds break-points at 950px and 600px. Meaning that if the window size = 950px, change this CSS class to these properties.

WPZA
  • 841
  • 1
  • 10
  • 27
  • Hi, thank you so much for helping!! really appreciate your code and pointing out about media queries <333!!! =)) I think I understand the media queries more now after looking at some websites about it. Adding a colon after the max-width: 950px part made it work as found in the CSS. Question, do you know if there's a way to decrease the white space between the logo and where the the contact form starts. I tried putting padding-top: -10% which didn't change it.. cuz there's no negatives in percentages so how do I decrease that space? Using pixels after that padding-right line didn't work either – user124889 Jul 01 '18 at 06:01
  • Apologies for missing the colon. I've updated the code — good spot! As for the logo try `.logo_wrapper {top: 25px;}` using a media query. – WPZA Jul 01 '18 at 10:07
  • Thanks for replying =)!! And oops I meant the white space between the navigation menu and where the contact form starts rather than the logo and contact form. Do u know the class name to target that area if using media query? I did try the code you wrote and tried it with: @media only screen and (max-width: 1200px) { .logo_wrapper {top: 25px;}} to test and the logo is in same place. P.S. is 950px and 600px the standard size for tablet and mobile dimension? wondering.. – user124889 Jul 01 '18 at 20:48
  • Try `.container_inner.default_template_holder {padding-top: 0;}`. As for the standard sizes, you should test every pixel. – WPZA Jul 01 '18 at 21:06
  • Edit: I did try the code you wrote and tried it with: @media only screen and (max-width: 950px) { .logo_wrapper {top: 25px;}} and it worked!!! THANK YOU!!! =))!!! It made a space before the logo on tablet/mobile view which is something I was looking for as well!! Thank you sooo much for your help and kind heart <333 =))!!! – user124889 Jul 01 '18 at 21:08
  • You're welcome — best of luck. We post regular updates on WordPress guides on our website, we just like to help everyone. – WPZA Jul 01 '18 at 21:10
  • That's nice, thank you so much ^^ Oh for the 950px and 600px, where did you get that number? Would it be the standard px for tablet & mobile? I tried the code you wrote as @media only screen and (max-width: 950px) { .container_inner.default_template_holder {padding-top: 0px;} } and the contact form is in same place lol P.S. for the .logo_wrapper media query, I noticed when clicking on the hamburg navigation, the menu overlaps the logo name so I changed it to 10px and it overlaps in the middle of the name of my logo. Originally the hamburg menu goes under the logo. Is there a fix for it? – user124889 Jul 01 '18 at 23:29
  • I made them up, your website needs them at around 1000 something, so 950 was the best to go for. – WPZA Jul 02 '18 at 07:58
  • Ooh, wait, how did you know my website needs it around 1000 something? How do u figure that out? – user124889 Jul 03 '18 at 01:26
  • Just by-eye. If the style looks off at a certain pixel, just change it. – WPZA Jul 03 '18 at 06:53