Clean Blog - a fully responsive, mobile 1st s9y theme

Skinning and designing Serendipity (CSS, HTML, Smarty)
Gryphen
Regular
Posts: 31
Joined: Sun May 21, 2017 12:53 pm

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by Gryphen »

I'm enjoying using this theme, it works well as a complete theme on an iPhone etc, but the only issue I have is visually on a PC, in that with the new wide screen it looks like I have the middle 1/3rd of the screen with my entries, and two rather large swathes of background running down each side.

I have copied the blog across to 'clean blog mod' and renamed the info.txt accordingly and have it up and running with a few galleries and about 171 recovered posts.

What do I need to edit (user.css ??) to change the view on the PC browser to take up more of the desktop without negatively impacting the view on mobile devices?
Gryphen
Regular
Posts: 31
Joined: Sun May 21, 2017 12:53 pm

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by Gryphen »

anyone have an idea on how it might be done?
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by onli »

That's possible, but I would not do that. The problem is that the text will become too wide, and then entries become hard to read. The max width of the content area comes from bootstrap, and it's a sensible default. Even if it really looks a bit strange on big displays.

If you want to change it anyway, there are two solutions I see. You could edit the index.tpl of your fork and change this line: https://github.com/s9y/Serendipity/blob ... x.tpl#L139

From:

Code: Select all

<main id="maincontent" class="container" role="main">
to:

Code: Select all

<main id="maincontent" class="container-fluid" role="main">
That will make the container full width and entries a lot wider than before.

Alternatively you override the container max width setting in your user.css. See https://stackoverflow.com/questions/338 ... rap-1920px. This looks like a somewhat reasonable suggestion:

Code: Select all

@media (min-width: 2400px) {
  .container {
      width: 1920px; 
  }
}
Gryphen
Regular
Posts: 31
Joined: Sun May 21, 2017 12:53 pm

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by Gryphen »

Thankyou onli,

I’ll keep the width problems you mentioned in mind
blog7
Posts: 1
Joined: Fri May 22, 2020 9:07 am
Location: Bulgaria
Contact:

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by blog7 »

This theme is very popular and use from many other CMS. Old and gold theme. Does it need any change with the latest version or does it work well anyway?
milonasv
Posts: 1
Joined: Wed Jul 22, 2020 1:21 pm
Contact:

Re: Clean Blog - a fully responsive, mobile 1st s9y theme

Post by milonasv »

onli wrote: Sat Jan 11, 2020 1:02 am That's possible, but I would not do that. The problem is that the text will become too wide, and then entries become hard to read. The max width of the content area comes from bootstrap, and it's a sensible default. Even if it really looks a bit strange on big displays.

If you want to change it anyway, there are two solutions I see. You could edit the index.tpl of your fork and change this line: https://github.com/s9y/Serendipity/blob ... x.tpl#L139

From:

Code: Select all

<main id="maincontent" class="container" role="main">
to:

Code: Select all

<main id="maincontent" class="container-fluid" role="main">
That will make the container full width and entries a lot wider than before.

Alternatively you override the container max width setting in your user.css. See https://stackoverflow.com/questions/338 ... rap-1920px. This looks like a somewhat reasonable suggestion:

Code: Select all

@media (min-width: 2400px) {
  .container {
      width: 1920px; 
  }
}
Man I have try with @media and site is broke, do you help me?
Post Reply