Changing the default width of content on wordpress.com theme

yourfotostory · Member · Sep 5, 2016 at 3:12 pm
Copy link

Add topic to favorites
Good day.

My website is built on “Photography theme” The default content width for the Photography theme is 658 pixels.

Is it possible to change the width of the content to full size/ bigger size?

I am particularly interested in my home page photos that I would like to make full screen or at least much bigger then 658px and gallery pictures as well.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 6, 2016 at 8:09 pm
Copy link
Hi there, Photography can be a bit of a challenge to widen. To do this would require the WordPress.com Premium Plan upgrade, which includes the Custom Design feature and the ability to add custom CSS.
yourfotostory · Member · Sep 7, 2016 at 7:06 am
Copy link
Hi there, thank you for the reply.
yes, I thought I would have to upgrade to premium and use CSS. But before I do that I wanted to figure out if it’s even possible to widen this theme.

What do you mean by a bit of a challenge😮?
Thank you
Jenya
thesacredpath · Member · Sep 8, 2016 at 3:01 am
Copy link
Hi Jenya, and thanks for the clarifications. On the home page, the default max width for the slider at the top (and the overall container) is 960px. The theme and WordPress software create 960px wide images off of your originals to use in the slider. With CSS, what we will be doing is asking the browser to increase the size of the images since we cannot edit the theme files and change the PHP/Javascript, and browsers aren’t equipped to do that very well. The following was worked up on your front page. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
#container {
    max-width: 100%;
}
.content .responsive-slides {
    max-width: 100% !important;
    width: 100% !important;
}
figure.image-frame, figure.image-frame, figure.image-frame img {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}
figure.image-frame span.theme-shadow {
    width: 100%;
}
```
After pasting this in, in the Media Width field below the CSS input area, enter 2000 and then save things and visit your site. Make sure and look at your About page since in my testing (without adding the 2000) the image was quite fuzzy.

If things are still fuzzy with the above, we might have to do something like increase the container to 1200px so that there isn’t such a drastic different between the original and the new width.

No items found.