Make line width different for mobile and computers?

Hi @missmuffet,

My understanding is that you want to do it with CSS, right?

If so, an option is to use media queries. You can see more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

An example would be like that:

@media (max-width: 1250px) {
  /* This will only apply if the width is less than 1250px */
}

@foosantos

Thanks for the quick reply – ack, apologies for not clarifying- I know nothing about html and css ?(intended to state this but forgot!) so I need total A-Z handholding like you were explaining it to someone who’s never even seen a computer before. ?Slight exaggeration because once or twice I’ve pasted in code when someone wrote it for me and told me exactly where to put it ,and with coaching I made my own jump links or anchor links (one of those; no idea what the difference is now) but that’s 100% the extent of my css knowledge.

Hi @missmuffet – I’d be happy to provide some CSS code and show you where to add it. Please give me a link to your site so I can take a look directly, and point me to exactly where on your site you’re looking to make the changes, as there are multiple places where blog posts and widgets might be displayed, and it’ll be much better if we can look at it directly. Thanks!

Hi @zoonini It’s not a publicly accessible site. Aren’t there instructions in the normal sense of the term anywhere?

Hi @missmuffet,

There aren’t specific instructions to do it as these would require you to edit the CSS for your site to achieve what you want — our goal is to check the site CSS and create it for you, so you only have to copy/paste the CSS to your site.

As your site is not publicly available, I can try checking with a regular demo for the same theme, but we would still need to understand a bit more about which part of the site you want to edit.

Can you please take a screenshot and try to clarify the parts that you want to change? You can use?https://snipboard.io/?for sharing screenshots — please follow the instructions on the page, then paste the URL here.

@foosantos

Great, thank you.https://snipboard.io/2w6UQr.jpg

• Mainly I want to change the line width of the main post text. It’s about five to seven characters wider than I’d like on computer screens as in the screenshot. On phones it’s about eight or ten characters too narrow. It’s not worth a big extra hassle for me to have it be perfect on every possible device such as every size of phone and tablet. Just computer screen and one common phone size is fine.
• I don’t care that the width of photo galleries isn’t matched with the text width. I like the photos’ size and row layout as they are which means they definitely won’t match the text line width. I suppose it might be nice to try out centering the text with respect to the photos (as opposed to left justified as they are now) but this is much less important to me than the text width.
• Line width on the Recent Posts (right-hand column) could be narrower but if that’s a big hassle we can skip that too.
• I don’t mind the empty space between the blog post and Recent Posts

Hi @missmuffet,

I’m not sure if I fully understood.

I was checking the theme further and I see it has a 58% default width with a 48em minimum screen size.

Full Size: https://d.pr/i/GUoYxq

Do you mean this should be narrowed?