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!

[cyberbrain]

Seconding what the person above me said, generally it's not a great idea to use a fixed pixel size for anything on a website nowadays. A percentage is a better idea (see also: em/rem sizing units).

A couple other things you could try: switch your tablet/mobile browser to desktop view and there's a chance that may fix the problem...as long as the layout hasn't been modernized (see: "responsive design" for more info on this modernization...and reasons to pull out your hair).

Or, this may be your best bet, and it should prevent the problem occurring on other layouts that people might use to view your posts, just put the following around the images you don't want moving around:
<div style="display: inline-block;margin-top: 1em;"><center>YOUR STUFF</center></div>

(center tag optional; re: the margin, set it to whatever looks good to you in your journal (you can use pixels there, it's a small space so it's unlikely something will break))

Another way to keep stuff from moving around, especially icon posts, is to put the icons in a table. Though, you should keep in mind that if you bind the items to never moving on a new line, they'll rezise to smaller and smaller sizes as the screen/window resolution is reduced.

[magnavox_23]

switch your tablet/mobile browser to desktop view and there's a chance that may fix the problem...

It's already set to this option, unfortunately.

just put the following around the images you don't want moving around:

Please forgive my ignorance. Do I put this code around every individual icon? I would also have no idea what looks good margin wise.

Another way to keep stuff from moving around, especially icon posts, is to put the icons in a table. Though, you should keep in mind that if you bind the items to never moving on a new line, they'll resize to smaller and smaller sizes as the screen/window resolution is reduced.

I don't mind them showing smaller due to resolution, but as I mentioned with the previous comment, I would have to go back through hundreds of these posts to make them all match if I were to use a table.

I was hoping there was an option within the layout custimizing page or some custom css or something that could tell the entry module to stay wide enough for the icons to display in the rows of four.

[cyberbrain]

I see you already pretty much found a solution above. I'll still try to clarify.

Do I put this code around every individual icon? I would also have no idea what looks good margin wise.
No, not around each icon, I meant put it around the whole part with the icons, so start with this before your icons
<div style="display: inline-block;margin-top: 1em;"><center>
icon pic 1, icon pic 2,,,,icon pic 25, etc and then close with
</center></div>

Actually looking at your posts now, you're already using a div for your icons, namely
<div style="text-align: center;">
so you could just add display: inline-block;margin-top: 1em; to it to make it
<div style="display: inline-block;margin-top: 1em;text-align: center;">
which would be neater. And then after your icons close the div with the /div tag. I'm so sorry for the extreme amount of textareas in this comment, I just can't for the life of me remember how to make the comments not render html.

I would also have no idea what looks good margin wise.
In this case the margin is above the icons part of the post, so you can just set it to anything and preview your post, if you don't like it, you can change the number until you like how it looks. (A big margin might look unnatural but then you probably also don't want the icons to look glued to any text that might be above them.)

I would have to go back through hundreds of these posts to make them all match if I were to use a table.
I see, yeah, that would be a pain to do indeed.

Oopsie, apologies for the spam, I failed to reply to the thread.

[magnavox_23]

Please don't apologise at all, I am very grateful you have taken the time to explain all of this to me.

Most of the div tags I use have been put in using the rich text format option for posting. I really only use the html when DW has a glitch, and the main one is it randomly moves cut tags around when editing a post multiple times for example.

So far I have gotten the page to display everything neatly on desktop, tablet and mobile, and aim to ensure readability on as many devices as possible.

I wish this stuff had been around when I was in school and had a younger less cruddy brain to make things stick!