(OLD 5.7 Discussion FORUM)

 

MrKDilkington replied on May 22, 2015 at 2:29 am Permalink Best Answer Reply

Hi PJSAndo,

The Elemental theme uses the Bootstrap framework grid system for layout. It is designed to be responsive.
http://getbootstrap.com/css/#grid...

You would need to modify the Bootstrap CSS.
- open bootstrap-modified.css
themes\elemental\css\bootstrap-modified.css
- do a search for "1170"
- replace it with "930"

PJSAndo replied on May 22, 2015 at 8:21 am Permalink Reply

Hello MrKDilkington,

Thanks for this. I made the change and the content is resized. Great. But when I reduce the size of the browser window to below 930px I get the horizontal scroll bar. Is this expected? For some reason I was expecting the page to resize all elements as it's a responsive theme.

Cheers
p

PJSAndo replied on May 22, 2015 at 8:23 am Permalink Reply

By the way, here's the page gotimetrekkers.com/concrete5

ConcreteOwl replied on May 22, 2015 at 8:49 am Permalink Reply

In your main.css file at around line 146 you have this code that is causing your problem

div.ccm-page header .container {
  width: 930px; 
}

PJSAndo replied on May 22, 2015 at 8:56 am Permalink Reply

Thanks. Yes, I must have changed it to re-size the header.

I'm having a real problem finding the main.css though...?

ConcreteOwl replied on May 22, 2015 at 8:58 am Permalink Reply

Try here
/concrete5/application/files/cache/css/timetrekkers/main.css
EDIT
No, thats just the cached file..
Perhaps someone who is using 5.7 could point you in the right direction.

PJSAndo replied on May 22, 2015 at 9:08 am Permalink Reply

Excuse my ignorance here, but don't files within cache folder contain settings that are brought in from elsewhere (if that makes sense) i.e. cached?

cheers
p

PJSAndo replied on May 22, 2015 at 9:05 am Permalink Reply

Ah yes, found it.
Changed it ,but scroll bar still appears when resizing the browser...?

ConcreteOwl replied on May 22, 2015 at 11:55 am Permalink Reply

Clear your cache because I am still seeing that css code in your cached css file..

PJSAndo replied on May 22, 2015 at 12:17 pm Permalink Reply

Thanks. Did that but no change. I have all cache settings set to off while developing also.

Turns out I'd changed the header.less in css/build. Deleted the added text (width 930px etc) and now seems to be better.

HardOne replied on May 22, 2015 at 12:50 pm Permalink Reply

Maybe you'd like considering to dig deeper into how Elemental themes css styling is organized and to learn what .less is. Not the easiest task, but once you understand which .less file does what and how they are structured will help you a lot. I promise.

I've made my own theme based on Elemental and it took me a while until I got it. But from then on, everything is really clear and way more easy to achieve.

Most confusing point was and sometimes still is, that looking at main.css gives no hint from which .less file its content comes from.

PJSAndo replied on May 22, 2015 at 12:54 pm Permalink Reply

yes definitely steep learning curve!

I did have a brief look at the Concrete5.org videos and docs on .less files and styling.

Slowly starting to make sense :)

I'll keep reading!

MrKDilkington replied on May 22, 2015 at 10:57 pm Permalink Reply

I would read about using source maps.
https://developer.chrome.com/devtools/docs/css-preprocessors...

It allows for much easier CSS debugging when using CSS preprocessors.

The Less compiler that concrete5 uses supports source map generation, but I am not sure what technical considerations are in place for why it isn't being used.