Reduce width of content in Twenty Eleven

  • I’m still fairly new at WP, I’ve put together a few basic functional sites, I’m currently working on my most complex set up so far. The site is https://www.NomadsWithiPad.com so I thought it would be neat to put the site framed around an iPad.

    I just learned about child’s themes 2 days ago and with the help of this forum and a few other WP tutorials, was able to manipulate the CSS to get my theme to display the iPad border like I wanted. I only have 2 problems/questions now:

    1. I have a little extra image that shows up at the bottom of the page under the iPad. I have an image about 10px tall that looks exactly like that image (below the ipad), which is how I get the iPad look on the screen. The headers and footers both have white backgrounds so you can’t see that image behind the top and bottom of the iPad but for some reason the page continues past the footer. I can’t seem to find where in the style sheets I can reduce the length of the pages or margins to prevent that extra bit from showing up.

    2. My next task is getting the menu and the content to fit within the iPads white frame. I’ve already customized the theme to be 1050px (up from 1000), so I have a space of 800px for all my content. I’m guessing my side bar will be about 150-200px and the content will take up the rest.

    Hopefully this makes sense as it’s late. Thanks in advance for any help and belated Merry Christmas.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter EagleEyeEarl

    (@eagleeyeearl)

    Ok, playing around a little I was able to solve the first problem by getting my content box to be in the right place. As you can see if you look at the site, I’ve now moved my sidebar content to a whole new area where I don’t want it to be.

    I was able to shift the Menu bar over so that it starts in the white area but I’d prefer it to start closer to the edge of the iPad frame. I tried setting the menu bar to a width of 800px (available white space) but I guess the search box in the menu bar is floating and I haven’t found it yet.

    Grateful for any help.

    Thread Starter EagleEyeEarl

    (@eagleeyeearl)

    Ahh…I keep finding new questions to ask! I’m leaving for a bit now so hopefully will get blessed with some responses when I return. I am building my site using Chrome but checking it at times with Firefox.

    Just noticed that the rounded corners I was able to create (using some CSS I saw somewhere else) work great in Chrome but no in FF. Any tips?

    I originally had tried having the posts appear with a grey background but then the comments bubble had a white square background that I couldn’t figure out how to fix. So I thought I’d try having a black border around the post. The border solved the problem except that it didn’t give me a border for the bottom. I’m open to change, any tips on how to either make the border go all the way around or how best to make the comments bubble transparent, because when I tried, it went from white to grey and then the mouse over turned the entire box blue instead of just the bubble.

    Thanks for helping me catch what I’m missing. I know a little CSS but this is big learning curve for me.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Reduce width of content in Twenty Eleven’ is closed to new replies.