Daily Dish Pro – customized width of articles and centering

[Tribulatio]

I continue to discover all possibilities one has with Studio Press Themes, and it is indeed amazing. After adding a few plugins and understanding how things work, it becomes actually easier than expected.

I have also started going into the code, despite my limited knowledge in that area. I have more or less managed to do what I wanted, except for one small thing.

Beside shorter pieces, the website I am working on has a number of rather long articles. In such cases, beside an attractive design, legibility really matters. And too wide a content is not comfortable for readers when going through a rather long article.

I have decided to use Garamond as a font for content. I have also tested reducing the width of the template to 1,000 px instead of 1,200 (obviously adjusting the size of the list of articles as well as of the sidebar in order to fit properly the reduced width).

Regarding the full articles themselves, they are found (after the visitor clicks "read more") on pages without the sidebar, in order to allow readers to focus on content. But even with a reduced width of 1,000, text is too wide for comfortable reading.

I have come to the idea that his could be solved by a wide margin on both sides. But if I reduce the width of content to 75 %, for instance, I can have the margin either on the right or on the left. I have not found a way to introduce the same margin or padding on both sides.

There must be a way to do it (only for full post pages, not for welcome page and list of articles). I was not able to discover where, either with Design Palette Pro or directly in the code.

Any suggestion (or other related advice) would be appreciated. Thank you.

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tribulatio]

Yes, you are right.

It is a mock site - based on an export of my real site, but not with its real title and some other changes, since I am in atesting phase before implementing what I have in mind on the real site. I have come back in the meantime to 1,200 px for testing purposes, but anyway this is not relevant to my issue.

Here is a link to a full-width page brought down to 80% by using:

.full-width-content .content {
width: 80%;
}

http://tribulatio.com/test/2015/11/suisse-radio-television-religion-rtsreligion/

I do anyway realize that it is NOT a good idea: not only it brings the content area either to the right or to the left, but not to the center; but moreover, it renders awfully on a smartphone screen. Thus this is NOT the trick I am looking for, but I leave it as it is for the time being. (And it is still too wide, but if I would reduce the theme to 1,000 px plus some padding on both sides, it would probably be right. However, it would still remain to be seen how it would show on a smartphone or other small screen.)

Of course, at the end, I might decide to keep the sidebar on full article pages: this would solve the issue. Let's see if some better ideas come from this discussion.

[nutsandbolts]

If you give .full-width-content .content a float: none; and margin: 0 auto; it will center correctly.

That should also address the mobile display issues (or seems to when I check it using Firebug).

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tribulatio]

Thank you! You are right, this is excellent! And moreover, your answer has taught me how to use some CSS functions I wasn't familiar with.

Probably I should also try, rather than to set content to 80 %, to choose a specific width: in that way, it will probably even show better on a smartphone. I will try that right now.

Many thanks for your helpfulness!

[nutsandbolts]

You're very welcome! If you have any other questions, just let me know. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tribulatio]

It solves my problem except for smartphones: I have made tests on my iPhone with sevewral browsers, and with all of them half of the screen is occupied by the background image (which didn't happen without "float"). I don't know if you have any explanation for that? (I should say that the server on which I am doing the testing is not a powerful one, but still I don't think that it can have an impact on the way pages render.)

I have made a screeen capture on my iPhone in order to show the issue:
http://tribulatio.com/images/smartphone_screen_capture.png

[nutsandbolts]

Part of the problem is the set width of 675px - you'll need to add some CSS rules for .full-width-content .content in your media queries to change that for smaller screens. Even then, though, I can't see what's causing the weirdness with the content being off center. Do you have any ads loading on the site?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tribulatio]

Thank you for your remarks.

Yes, definitely an issue with smaller screens. When I had reduced it to 80%, it was working fine but it left empty space on both sides on the smartphone screeen too, hence my idea rather to choose 675px. Maybe not the best idea after all...

No ads at all on the website.

[nutsandbolts]

So maybe use 80%, then add a second rule in your smaller media queries to change it to 100%.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tribulatio]

I did not (yet) know this could be done. Bright suggestion again, thank you very much!

[Tribulatio]

I have still to find the syntax for such a rule in smaller media queries - but it is quite late right now here, so I will stop for tonight and see tomorrow how this should be done.

Thank you once again!

[Tribulatio]

Just to add the answer, since I had included it in another post - I had finally found the trick to do it:

Instead of creating exceptions, to keep the width to 100%, but at the same time to set a maximal width. For instance:

width: 100%;
max-width: 675px;

Then, for any screen less wide than 675px, a responsive theme will automatically use the full-width, thus avoiding various issues encountered with my previous attempts.

[Author]

Posts