One page column order on mobile

  • Sorry to start yet again a thread on column order then displaying on mobile.

    My home page has 3 columns (1,2,3) that I wish to display as (2,1,3) only in the mobile view for the Home page. I searched and found a number of threads on WordPress forums addressing this same question and found the following code that works fine for all the pages on the site:

    @media only screen and (max-width: 600px) {
   .wp-block-columns :nth-child(1) { order: 2; }
   .wp-block-columns :nth-child(2) { order: 1; }
   .wp-block-columns :nth-child(3) { order: 3; }
}

    I entered this in the Styles for the page Template:
    Appearance -> Editor -> Templates -> Page no Title -> (edit) -> Styles -> Additional CSS

    I also found a reference elsewhere to using the .page-id number to target only that one page.. I opened the Home page in a browser, copied and pasted the code into Notepad++ and found the “body class = “home page-template page-template-page-no-title page page-id-6 logged-in …”. I’m now stuck with where to put the .page-id-6 in the above code so it works.

    I tried:

    .page-id-6 @media only screen and (max-width: 600px) {
   .wp-block-columns :nth-child(1) { order: 2; }
   .wp-block-columns :nth-child(2) { order: 1; }
   .wp-block-columns :nth-child(3) { order: 3; }
}

    But the mobile column order remains the same (1,2,3)

    Am I on the right track to solving this?

    If so, what have I done wrong?

    Note that I’m still a 1-month old WordPress Newbie, but have some prior experience designing traditional HTML/CSS sites using Grid and Flex. As a learning project I’m duplicating the look and function of a small site I previously made with Atom using grid-template columns, rows, and areas to define the mobile and desktop display block positions and order.

    Thanks for any help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Right track, wrong syntax ?? .page-id-6 belongs with every selector you want it applied to. It cannot be applied to a media query. Like this for all 3 rules:
    .page-id-6 .wp-block-columns :nth-child(1) { order: 2; }

    Thread Starter rpmtl22

    (@rpmtl22)

    So the answer to the skill testing question is / should be <drum roll ….>

    @media only screen and (max-width: 600px) {
  .page-id-6 .wp-block-columns :nth-child(1) { order: 2; }
  .page-id-6 .wp-block-columns :nth-child(2) { order: 1; }
  .page-id-6 .wp-block-columns :nth-child(3) { order: 3; }
}

    Thank you very much for helping me over the finish line! ??

    I hope this thread might also help others who are trying to do this.

    R

    Thread Starter rpmtl22

    (@rpmtl22)

    It works perfectly ??

    R

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘One page column order on mobile’ is closed to new replies.