writable area decreases when window 1199px --> 1200px (workaround provided) #48

Closed
altsheets opened this Issue Nov 7, 2015 · 10 comments

Comments

Projects
None yet
3 participants
@altsheets

for some reason, the writable area

.content-section .row .(col-lg-8 col-lg-offset-2)

decreases(!) from 970px width to 780px width
when the window size increases from 1199px to 1200px.

Not sure why (I am not an experienced CSS designer),
but this workaround fixed it for me:

@media(min-width:1200px){
    .content-section .col-lg-8 {
        width:970px;
        margin-left:100px;
        margin-right:auto;
    }
}

HTH

:-)

@le4ker

This comment has been minimized.

Show comment
Hide comment
@le4ker

le4ker Nov 8, 2015

Owner

Hmm I'm sorry but I don't get what you mean by "writeable area".

Can you please post screenshot/s to reproduce it?

I'm asking because we should understand the issue in order to fix it 😉

Owner

le4ker commented Nov 8, 2015

Hmm I'm sorry but I don't get what you mean by "writeable area".

Can you please post screenshot/s to reproduce it?

I'm asking because we should understand the issue in order to fix it 😉

@altsheets

This comment has been minimized.

Show comment
Hide comment
@altsheets

altsheets Nov 8, 2015

what you mean by "writeable area".

The area that the text is rendered into.
It gets smaller when the whole window gets larger.

screenshot/s

Sure, no problem. Here:
http://i.imgur.com/YoVGbRR.png

Hope that helps :-)

P.S.: Using your theme as the basis for my new website (#46 (comment)). Thanks a lot :-)

what you mean by "writeable area".

The area that the text is rendered into.
It gets smaller when the whole window gets larger.

screenshot/s

Sure, no problem. Here:
http://i.imgur.com/YoVGbRR.png

Hope that helps :-)

P.S.: Using your theme as the basis for my new website (#46 (comment)). Thanks a lot :-)

@le4ker

This comment has been minimized.

Show comment
Hide comment
@le4ker

le4ker Nov 9, 2015

Owner

Oh I see what you mean..
I'm also new to CSS and I have no idea why this is happening.. But it's great that you have a fix! 😄

Our CSS champion is @joariasl by the way. @joariasl any ideas why this is happening? 😓

@altsheets Can you please open a pull request with your suggestion in order to test it and merge it with the repo? 😉

P.S.: Your website looks great! 😉

Owner

le4ker commented Nov 9, 2015

Oh I see what you mean..
I'm also new to CSS and I have no idea why this is happening.. But it's great that you have a fix! 😄

Our CSS champion is @joariasl by the way. @joariasl any ideas why this is happening? 😓

@altsheets Can you please open a pull request with your suggestion in order to test it and merge it with the repo? 😉

P.S.: Your website looks great! 😉

@le4ker le4ker added the bug label Nov 9, 2015

@joariasl

This comment has been minimized.

Show comment
Hide comment
@joariasl

joariasl Nov 9, 2015

Collaborator

This week I think that I have more free time. It is easy to fix. I will take a time to implement other improvements.

Collaborator

joariasl commented Nov 9, 2015

This week I think that I have more free time. It is easy to fix. I will take a time to implement other improvements.

@le4ker

This comment has been minimized.

Show comment
Hide comment
@le4ker

le4ker Nov 9, 2015

Owner

@altsheets that's why we call him the CSS champion of the repo! 😜 👏

Owner

le4ker commented Nov 9, 2015

@altsheets that's why we call him the CSS champion of the repo! 😜 👏

@altsheets

This comment has been minimized.

Show comment
Hide comment
@altsheets

altsheets Nov 9, 2015

It is easy to fix.

Nice. Happy to hear.

to implement other improvements

... and looking forward to those!

open a pull request with your suggestion

Not sure that is necessary.
All that needs to be added are the 7 lines up there in the OP.


Ah ... another good idea, to operationalize this, and to keep it clean.

  1. add two more css files, call them
  • personal.css, and
  • user.css
  1. load both by default from the html. (BELOW ... link href="grayscale.css and timeline.css )

put all your "personal-jekyll-theme" CSS changes into personal.css. And suggest to users / forkers ... to put their additional styles into user.css !

Then you can import the unchanged(!) grayscale.css and timeline.css from their original sources, and all your "personal-jekyll-theme" specific CSS will just override those. The advantage: If there are newer, updated commits of the original grayscale.css / timeline.css it will be really easy to merge them into PJT.
Plus, the end users (like me), will know where to put their style changes.

In my case, I had just added an "altsheets.css" into line 31, and put all my style changes into that file. This way I could keep your .CSS unchanged.

And CSS that is loaded later, will override CSS that is loaded earlier (I looked that up * g * ).


But it's great that you have a fix!

Happy to help. Cooperation ... that is best aspect of the internets.

P.S.: Your website looks great!

Thanks a lot. Yours, too * lol *

It is easy to fix.

Nice. Happy to hear.

to implement other improvements

... and looking forward to those!

open a pull request with your suggestion

Not sure that is necessary.
All that needs to be added are the 7 lines up there in the OP.


Ah ... another good idea, to operationalize this, and to keep it clean.

  1. add two more css files, call them
  • personal.css, and
  • user.css
  1. load both by default from the html. (BELOW ... link href="grayscale.css and timeline.css )

put all your "personal-jekyll-theme" CSS changes into personal.css. And suggest to users / forkers ... to put their additional styles into user.css !

Then you can import the unchanged(!) grayscale.css and timeline.css from their original sources, and all your "personal-jekyll-theme" specific CSS will just override those. The advantage: If there are newer, updated commits of the original grayscale.css / timeline.css it will be really easy to merge them into PJT.
Plus, the end users (like me), will know where to put their style changes.

In my case, I had just added an "altsheets.css" into line 31, and put all my style changes into that file. This way I could keep your .CSS unchanged.

And CSS that is loaded later, will override CSS that is loaded earlier (I looked that up * g * ).


But it's great that you have a fix!

Happy to help. Cooperation ... that is best aspect of the internets.

P.S.: Your website looks great!

Thanks a lot. Yours, too * lol *

joariasl added a commit to joariasl/jorgearias.cl that referenced this issue Nov 10, 2015

Solved le4ker/personal-jekyll-theme#48
Chenged class to "col-lg-10 col-lg-offset-1" in div container content

@le4ker le4ker added the HTML/CSS label Nov 11, 2015

le4ker added a commit that referenced this issue Nov 14, 2015

Merge pull request #56 from joariasl/master
Complete refactorization for css/grayscale.scss and sorted sections in index.html Fixes #40 #48 #57
@le4ker

This comment has been minimized.

Show comment
Hide comment
@le4ker

le4ker Nov 14, 2015

Owner

Fixed here commit/004cf1f53e341b68ab9d80f11b290f2249ce34fe

Owner

le4ker commented Nov 14, 2015

Fixed here commit/004cf1f53e341b68ab9d80f11b290f2249ce34fe

@le4ker le4ker closed this Nov 14, 2015

@altsheets

This comment has been minimized.

Show comment
Hide comment
@altsheets

altsheets Nov 14, 2015

col-lg-8 col-lg-offset-2

col-lg-10 col-lg-offset-1

ah, that makes sense.

I had actually already suspected s.th. like that,
but I had not fully understood the underlying CSS.

Cool. Thanks a lot

col-lg-8 col-lg-offset-2

col-lg-10 col-lg-offset-1

ah, that makes sense.

I had actually already suspected s.th. like that,
but I had not fully understood the underlying CSS.

Cool. Thanks a lot

@altsheets

This comment has been minimized.

Show comment
Hide comment
@altsheets

altsheets Nov 14, 2015

and what about the idea to leave the original

grayscale.scss
Grayscale Bootstrap Theme (http://startbootstrap.com)

untouched, and just override it with a (later-loaded)

personal-jekyll-theme.css

in which all the local changes are kept together?

See the 2nd part of #48 (comment)

For now, it might be a bit of a hassle, but a good compare-tool will make it easy. Long-term it is definitely of advantage.

Thanks for considering it.

and what about the idea to leave the original

grayscale.scss
Grayscale Bootstrap Theme (http://startbootstrap.com)

untouched, and just override it with a (later-loaded)

personal-jekyll-theme.css

in which all the local changes are kept together?

See the 2nd part of #48 (comment)

For now, it might be a bit of a hassle, but a good compare-tool will make it easy. Long-term it is definitely of advantage.

Thanks for considering it.

@joariasl

This comment has been minimized.

Show comment
Hide comment
@joariasl

joariasl Nov 14, 2015

Collaborator

The original grayscale style contains any bugs not corrected.
I created a pull request for this project, but the project is apparently abandoned.
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/27
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/26

Another person saw the same errors:
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/18

At the end we should leave the modified copy, could not bear to leave these errors. 😜

Collaborator

joariasl commented Nov 14, 2015

The original grayscale style contains any bugs not corrected.
I created a pull request for this project, but the project is apparently abandoned.
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/27
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/26

Another person saw the same errors:
https://github.com/IronSummitMedia/startbootstrap-grayscale/pull/18

At the end we should leave the modified copy, could not bear to leave these errors. 😜

@le4ker le4ker added this to the Version 4.0.0 milestone Nov 14, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment