make pictures fill page

wordpressmarkb · Member · Jun 21, 2014 at 3:40 pm
Copy link

Add topic to favorites
Hey Guys/Gals.
Is there some code I can use to make me pictures display bigger??
http://markbennett.eu/

I have purchased the theme so I can edit CSS but I dont have a clue what to do.
Can anyone help please, thank

The blog I need help with is: (visible only to logged in users)
lizthefair · Member · Jun 21, 2014 at 5:01 pm
Copy link
Hi Mark,

do you want the photos to be larger when readers scroll through your page, or are you saying you’d like readers to be able to click on the photos they like and see a larger version?

If it’s the second, you won’t even need to get into the code. When you upload the photos just choose “link to media file” rather than “link to url” as described in this tutorial. http://en.support.wordpress.com/links/image-links/

Then when readers click on your photos they should be taken to a full resolution copy of the image.
wordpressmarkb · Member · Jun 21, 2014 at 5:59 pm
Copy link
Hey thanks for the reply.
I would like the images to be larger as the reader scrolls through the page.
Right now the images are displaying too small, I would like them to be nearly twice the size they are.

Really appreciate the help
lizthefair · Member · Jun 21, 2014 at 6:11 pm
Copy link
In that case, you have a couple of options:

2) pick a different theme that has a wider content area (go to http://theme.wordpress.com/themes/subjects/photography/ to browse new themes)

3) purchase the CSS upgrade so you can expand the content area allowed for your posts in your current theme.
wordpressmarkb · Member · Jun 21, 2014 at 7:18 pm
Copy link
Hi Liz, I did buy the CSS upgrade but I can figure out how to make the images larger…
Would you know how?
timethief · Member · Jun 21, 2014 at 7:34 pm
Copy link
@wordpressmarkb
I do not help with CSS editing so I avoid posting into CSS threads. However,I know many who use the theme you use do not check out Superhero’s Theme Showcase page to find out how to configure the Featured Content slider:
http://theme.wordpress.com/themes/superhero

The Featured Content image size is at least 960 wide.
Individual post featured image is at least 645 wide.
wordpressmarkb · Member · Jun 22, 2014 at 1:42 pm
Copy link
Hey I know about the featured image but I want all the existing posts on my blog to be at around 960 wide.
Is there something that I can do to achieve this.
I have purchased the upgrade and all I need now is the no how to reformat the blog so that all of my pictures display at 960.

Anyone??
lizthefair · Member · Jun 22, 2014 at 2:37 pm
Copy link
I’m fairly new to CSS so you’ll want to try this somewhere you can undo it if it doesn’t work, but I believe you need to expand your primary content area like this. When I tried it my browser expanding the primary content area also hid the sidebar, so if that’s not ok with you, I don’t think this will work.
```
#primary {

  1. float: left;
  2. margin-right: 25px;
  3. width: 960px;

}
```
lizthefair · Member · Jun 22, 2014 at 2:42 pm
Copy link
There might be an easier way.

I just setup one of my test blogs with Superhero and it looks like you can expand the content width without actually changing the code.

Just go to the customize menu and click CSS. Below the box where you can enter new code is an option for “content width.” Try changing the column with to 960 from there.
wordpressmarkb · Member · Jun 22, 2014 at 3:59 pm
Copy link
Hey!! Yea I have been trying that content width part but it wont work…
I dont have a clue what I am at.
I will try that code you gave me now.

Thanks a mill
designsimply · Member · Jun 23, 2014 at 2:38 pm
Copy link
To make the photos bigger in the Superhero theme, you will want to expand the main content area using CSS. lizthefair was on the right track with her CSS example, only you don’t need the line numbers (like 1, 2, 3) and you just need the line for width. Also, if you want to keep the sidebar from falling to the bottom, you should also adjust the #main width to expand it by the same pixel amount as you did for the #primary element. Last, I would recommend only applying the change to large screens using a media query because then you’ll keep the nice responsive design that comes with the Superhero theme in tact.

Here is an adjusted example based on lizthefair’s first one:
```
@media screen and (min-width: 1225px) {
	#main {
		width: 1225px;
	}

	#primary {
		width: 960px;
	}
}
```
To learn more about media queries, check out http://en.support.wordpress.com/custom-design/custom-css-media-queries/
lizthefair · Member · Jun 23, 2014 at 7:47 pm
Copy link
. . .copied the code out of the inspect element feature of Chrome. . .now I know one of the drawbacks of that method ;)

Thanks for following up with much more elegant code!
wordpressmarkb · Member · Jun 23, 2014 at 8:12 pm
Copy link
I can’t thank you enough!!!
Thank you all so much.

now is there anything else snazzy I can do?

lol, delighted!
designsimply · Member · Jun 23, 2014 at 8:29 pm
Copy link
@lizthefair, thanks so much for chiming in to help. :) Stick around and you’ll be an expert in CSS in not time. I’d love that!
designsimply · Member · Jun 23, 2014 at 8:30 pm
Copy link
now is there anything else snazzy I can do?

Ohhhhh. Tons!

I try to tag each CSS help request with the theme name (since CSS is all theme-specific), and so you might find some really nifty things if you dig around in the Superhero theme tag at https://en.forums.wordpress.com/tags/superhero

No items found.