Odd breakpoint

Archive
1

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.

2

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 :slight_smile:

3

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.

4

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:

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.

5

|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.

6

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.