panel width

mkhanna5 · Member · Dec 28, 2016 at 12:48 pm
Copy link

Add topic to favorites
Hi,
The width of the page https://mathsexperiment.com/the-approach/ isn’t as wide on the home page. I managed to set it to 1000px on the home page. Can you help me with the code please?

I am referring to the text below the page title THE APPROACH and the grids below it. Thank you so much!

The blog I need help with is: (visible only to logged in users)
eallas · Member · Dec 28, 2016 at 1:37 pm
Copy link
Howdy mkhanna5!

Try this code out! It has the same width setup as the home page.
```
.site-content .content-area {
    max-width: 1000px;
}
```
Let me know if this works.
mkhanna5 · Member · Dec 28, 2016 at 4:45 pm
Copy link
Hi eallas! This code moved my home page to the left creating a white space throughout the page. No change to the inner page’s gap. Any other ideas?

Thank you so much!
eallas · Member · Dec 28, 2016 at 7:02 pm
Copy link
I set up multiple codes to try if one doesn’t work. Let me know if any of these help.
1. `.site-content .content-area {
  width: 100%;
  }`
2. `.the-approach .site-content .content-area {
  width: 100%;
  }`
3. .site-content .content-area #the-approach{ width: 100%; }

eallas · Member · Dec 28, 2016 at 7:04 pm

I apologize, the formatting messed up. Here’s a fixed version:

—

.site-content .content-area {
width: 100%;
}

—

.the-approach .site-content .content-area {
width: 100%;
}

—

.site-content .content-area #the-approach{
    width: 100%;
}

mkhanna5 · Member · Dec 28, 2016 at 7:11 pm
Copy link
Eallas, this worked wonders! I used the first one. Thank you so much. :)

However, one minor issue. The form on this page is too close to the left. https://mathsexperiment.com/sign-up-2/. Do you know how I can central align it?
eallas · Member · Dec 28, 2016 at 7:22 pm
Copy link
This code should help:
```
.contact-form label {
    text-align: center;
}

form {
    text-align: center;
}
```
Let me know if otherwise!
mkhanna5 · Member · Dec 29, 2016 at 6:48 am
Copy link
Yes, this worked! Any ideas on how I can get the text aligned to the left (i.e. in alignment with the form) but both of them in the center of the page?
eallas · Member · Dec 29, 2016 at 1:17 pm
Copy link
Hey again mkhanna5!

It seems like you’ve reworked the page and the text is aligned to the left. Do you still need help with the issue?
mkhanna5 · Member · Dec 29, 2016 at 4:41 pm
Copy link
Sorry, that was only a temporary fix from my side. Yes, look forward to your inputs. Here it is: https://mathsexperiment.com/#post-337
eallas · Member · Dec 29, 2016 at 5:14 pm
Copy link
Maybe this will help out?
```
.contact-form label {
    text-align: left;
    text-indent: 180px;
}
```
mkhanna5 · Member · Dec 29, 2016 at 6:58 pm
Copy link
hi eallas! Thank you for the code. I am trying to avoid using a specific px for indent because sometimes it affects the responsiveness of the site. :(

eallas · Member · Dec 29, 2016 at 8:52 pm

Do either of these work for you?

.contact-form label {
    text-align: left;
    text-indent: 27%;
}

—

.contact-form label {
    text-align: left;
    left: 27%;
}

mkhanna5 · Member · Dec 30, 2016 at 6:27 am
Copy link
The first one worked!! Thank you so much. It’s looking great now. :)
eallas · Member · Dec 30, 2016 at 10:36 am
Copy link
Great to hear! Have a great New Years and Holidays!
mkhanna5 · Member · Dec 30, 2016 at 11:03 am
Copy link
Thank you eallas! You are so very helpful. :) Happy holidays!

Couldn't find what you needed?