Skip to main content

Crowdstack is set to fill only 66% of a browser’s window width when viewing on desktops and laptops. In my opinion, this creates a large waste of screen real estate.

In the past, we were warned by Crowdstack that adjusting the display width to fill more of the screen would cause “many issues.”  But after repeated requests from my community (www.rotation.org), and my own interests in “trying,” I tempted fate and changed the width from 66% to 80% by making several small tweaks to our custom CSS.

I’m happy to report that we’ve encountered NO ill effects. 😎 We are very pleased with the change. (We do have one cosmetic issue in the nav bar that I’m still working on.)

None of our changes affected the responsive/small screen settings or appearance whatsoever.

We do not use “cards” so I can’t speak to how those would be affected.

I believe 80% is a good spot for our site.

Feedback and questions welcome.

Replies sorted oldest to newest

Hey Rich... long time! How are things over at OGR?

Below is the pertinent custom CSS. I post it with caveats:

Caveat 1: We aren't using the "cards" mode/version of Cstack. Like you, we're using what I believe used to be called "version 1" or the legacy format, (i.e. no cards enabled).

Caveat 2: We're not running any third-party features (code). If someone is, then our width adjustment may create unintended (but not necessarily unfixable) changes.

Caveat 3: Over the years, we've created quite a few lines of custom CSS to change the appearance of Cstack's interface. After implementing the "80%" change, we had to tweak the layout of a few of our items (but not a lot).  From time to time, Cstack has looked at/helped with our customizations and given us advice. However, Cstack Support has twice told me they don't support changing the width of our site and won't help us do so.  I'm mystified by that, especially since, SO FAR, we've proven that the change is easy to do and seems to work without negative consequences.

Caveat 3: I'm not an expert in CSS. I work at it until it works. I'm sure a pro could clean this up and maybe do it in a different way -- but IT WORKS for us.

Thankfully, none of the following affects responsive "small screen" appearance.

Good luck.

Neil



/*this one took us from 66% to 80rem*/
.row {margin: 0 auto; max-width: 80rem; width: 100%;}

/*increase community nav bar width for wider screen*/
#top_nav_bar_wrapper {max-width: 80rem;}

/*adjusts sticky community nav bar titling to new width*/
.row .fixed .row { max-width: 80rem;0}

/*needed to adjust nav bar to new screenwidth when in stickyfixed position*/
.fixed {right: 0;}

/*seems to help top nav bar stay inside its container. Original maxwidth was orig 62*/
.contain-to-grid .top-bar {max-width: 80rem;}

neil

I have been able to figure out of couple of odd layout issues created by the site widening, but this one has me stumped (and may only be something Crowdstack can adjust).

I haven't been able to figure out how to get IMAGES to automatically fill the width of a posting window when attaching them to a post. The images in question are wider than 600 pixels, but when I attach them and check "insert...large"  they only display at 600px, which is less than the width of the posting window.

Whereas, if I use the insert image option and paste in an image URL of the same image, the resulting image does fit the posting window's width.

Visual example of the width difference...

width-issue

I think it has something to do with Cstack's CSS for the gallery image label because that's the only difference I can see between the two image insertion options.

Attachments

Images (1)
  • width-issue
neil

Hi Rich and Neil,

Is there any more documentation on this? I've been playing around with the CSS but my expertise in coding isn't good enough to get the desired effect. Getting closer to 100% of the screen width would be great.

Anyway, don't hesitate to post back if you found some clever fixes 🙂

Regards,
Dominic Jorge
CTO Flower delivery Spain
Madrid

D

Add Reply

×
×
×
Link copied to your clipboard.
×