Creating a static width for entries

[magnavox_23]

Hi all! I was pointed this way to possibly find help with what is probably a really basic style issue. I am wanting to know if there is a way to keep the width of my entries static across all devices? (I'd been happy with anything 600px +) My page looks great on the PC, but on a tablet, the width of my entries shrinks and it throws out the placement of my artwork.

Desktop:


Tablet:


This is the theme I am using:


I have a paid account, and I've had a play around with the customize your theme option, but no luck, and I only know very basic html and css. Any help or advice would be very appreciated!

Comments

[wychwood]

I would really recommend not going for an actual fixed-width layout - it might look great on your computer, and even your tablet, but it's likely to be entirely unreadable on mobile (or even a smaller tablet). You can probably find an option to make the centre column a larger percentage of the total width, which will help that specific use-case but the line-breaks are still going to be in different places on smaller screens.

Why not just put all the icons in, effectively, a single row, and let the line-breaks fall naturally? That will at least prevent the "just one icon every other row" issue you have on the tablet view here, so the rows will all be equal length (except the last!).

[magnavox_23]

I would really recommend not going for an actual fixed-width layout - it might look great on your computer, and even your tablet, but it's likely to be entirely unreadable on mobile (or even a smaller tablet).

This is what I suspected, I am years out of practice with responsive design.

You can probably find an option to make the centre column a larger percentage of the total width, which will help that specific use-case but the line-breaks are still going to be in different places on smaller screens.

That's what I was looking for in the customizing layout options, but there is just no option for this.

Why not just put all the icons in, effectively, a single row, and let the line-breaks fall naturally? That will at least prevent the "just one icon every other row" issue you have on the tablet view here, so the rows will all be equal length (except the last!).

Forgive me, I am having difficulty picturing what you're describing here. Are you suggesting I have no line breaks between any of my icons, and have them natural sit across whatever width the entries are? If I didn't have hundreds upon hundreds of these posts with the rows of four icons layout going back years, and my neurospicy brain would alloy me to not have the layout matching across the journal... perhaps. :P

[wychwood]

Are you suggesting I have no line breaks between any of my icons, and have them natural sit across whatever width the entries are?

Yes, exactly. If they have to be consistent, you'll have to live with the awkward line breaks, I'm afraid!

Column width - looking at your layout, the reason it's not full width is this:

@media only screen and (min-width: 45em) {
    #content {margin:0 15%; padding:0;}

So if you set a rule in Customize Journal Style -> custom CSS to set the margin to 0% or something, that should make it wider. Hopefully.

[magnavox_23]

I am happy to give that a go, how do I do that?

[wychwood]

Go to Customize Journal Style; find the "custom CSS" section (it's labelled); paste in the rule I showed you and change the margin % to whatever number you want.

[magnavox_23]

Oh, silly me! Thank you so much. I pasted it in and chose 5% and it is now showing like this:



Which is so much better! I am going to play with it across multiple devices, phone, etc and see how I can make it look the tidiest with this. Thank you for being so patient with me and helping me with this. I really do wish I could understand how code works, but I am very grateful!