Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Odd breakpoint

Started by Muut Archive 11 years ago · 5 replies · 380 views
11 years ago

I'm trying to adapt the one page demo to my needs, and in one module I have a fair bit of text. With the window about 960px it is fine; text is ranged left as I want. With a window smaller than 960px, text jumps to centred. I'm having trouble finding where to set this.

Thanks.

11 years ago

Perhaps if you provide a link to your site with a screenshot of the specific HTML/CSS that's a problem we can help. Not really a Grav issue though :)

11 years ago

Fair enough. Site is here and the reason I thought it might be a Grav issue is that I am using Antimatter theme with a few tweaks.

11 years ago

Do you mean that the sidebar gets moved when viewport is below 960px? This is a common design pattern for modern sites to achieve usability for mobile devices, as shifting the sidebar to the bottom of the page allows for easier focus on content before navigation. If you do not want this to occur, you can fix it by disabling the relevant CSS media queries in template.css and nucleus.css, specifically into something like this:

CSS
Template.css:
  @media only all and (max-width: 47.938em) {
    #sidebar {
      /* padding-left: 0; */
      } }

Nucleus.css:
  @media only all and (max-width: 47.938em) {
    .block {
      /* -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 100%;
      -moz-flex: 0 100%;
      -ms-flex: 0 100%;
      flex: 0 100%; */
      } }
@media only all and (max-width: 47.938em) {
  body [class*="size-"] { 
    /* -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 100%;
    -moz-flex: 0 100%;
    -ms-flex: 0 100%;
    flex: 0 100%; */
    } }
.size-1-3 {
  /* -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 33.33333%;
  -moz-flex: 0 33.33333%;
  -ms-flex: 0 33.33333%;
  flex: 0 33.33333%; */
  }

You'll need to find the references and change them (I just commented them out with developer tools and copied the resulting css), or add them into custom.css with overrides.

11 years ago

|Thanks, but no, it isn't the moving sidebar. It is that the text in the main content div goes from ranged left to centred below 960px.

11 years ago

Website looks good here, no noticable difference between aboven/below 960px except some responsive design changes. You can always just select the main content div in firebug, resize the window and see if any off the CSS properties get overwritten. Sounds like there might be a mediaquery defining text-align: center below 960px. Although for me it all remains aligned left regardless of the viewport size.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1352 9 years ago
Archive · by Muut Archive, 9 years ago
2 935 9 years ago
Archive · by Muut Archive, 9 years ago
2 4063 9 years ago
Archive · by Muut Archive, 9 years ago
1 2949 9 years ago
Archive · by Muut Archive, 9 years ago
3 1119 9 years ago