Increase width of my page

fi1985 · Member · Oct 13, 2014 at 9:37 pm
Copy link

Add topic to favorites
Hello,

I am seeking help to increase the width of my one-page website.

Background info: first I had to hide the sidebar using:

#sidebar {
display: none;

then, I changed the following to make my content in the centre:

#page {
width: 500px;

when i increase/decrease the width, the content goes left and right. I would like to keep it centre BUT i’d like to increase the width of the page where the photo and text are.

Any help?

site: faisalirshaid.com

Regards.

The blog I need help with is: (visible only to logged in users)
jsmutek · Member · Oct 14, 2014 at 3:05 am
Copy link
Hey Faisal, if you remove the width:500px rule from #page and add –
```
#content {
  max-width: 100%;
}
```
Does that get you where you need to be?
fi1985 · Member · Oct 14, 2014 at 1:38 pm
Copy link
didn’t work am afraid. Instead, it put my content to the left.
fi1985 · Member · Oct 14, 2014 at 1:48 pm
Copy link
Also, I tried to increase the width say %150, but nothing happened. While when I did it %50, half of my page was gone.

Help please.
thesacredpath · Member · Oct 14, 2014 at 4:14 pm
Copy link
Hi there, #content had a left float set in it, so if you add the following all should be good with whatever width you use for #page and #content.
```
#content {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
```
fi1985 · Member · Oct 14, 2014 at 6:46 pm
Copy link
thanks – so shall i add this to what was proposed before?
fi1985 · Member · Oct 14, 2014 at 7:35 pm
Copy link
What i need is to be able to increase the width of my page without affecting its location. If i make the photo bigger, half of it or so gets chopped off. I want to be able to increase the space where i can put my content.
thesacredpath · Member · Oct 14, 2014 at 8:34 pm
Copy link
Add what I have instead of what was given before.
fi1985 · Member · Oct 14, 2014 at 8:46 pm
Copy link
fine – i did it. the content is in the centre – but it didnt solve the issue of the width. when i add the width where i should, it doesn’t increase the width of the page but zoom in the photo, thats all.
thesacredpath · Member · Oct 14, 2014 at 9:01 pm
Copy link
Sorry, you have to increase the widths in #page and #content. Right now you have #page at 500px, and since that is the parent of #content, a change in width to #content alone will not increase the width of the content. Both have to be increased. Change the #page width you have in your CSS to your chosen width, then add a width declaration to #content at 50px less, which accounts for some padding. Here is an example with the page width set to 800px and the content width set to 750px
```
#page {
    width: 800px;
}
#content {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 750px;
}
```
Also, I notice you have hidden the WordPress.com and theme footer credits from your site. Those are require to remain on your site, visible and readable. You can style them to better fit with your site design as long as they remain readable and visible. Please remove the following from your CSS to restore the footer credits?
```
#footer p {
    display: none;
}
```
Thanks in advance.
thesacredpath · Member · Oct 14, 2014 at 9:04 pm
Copy link
Oh yeah, and I forgot one thing. On the CSS page in the customizer, in the field below the CSS area enter the same number you enter for the width in #content at Content Width and save. That way images inserted into posts or page at full width will be the full width of the content area.

No items found.