Wonky Phone Format (Twenty Twelve)

• 

  cinephobiac · Member · Sep 20, 2021 at 10:41 pm

  • Copy link
  • Add topic to favorites

  Hello everyone,

  I made a lot of custom tweaks to the Twenty Twelve theme and I’m (almost) happy with how it looks on the Desktop.

  https://www.dystopiafilms.com/ludovico-documentaries/

  I reduced the column width of the blog posts using the following code:

  .hentry {
  margin: 70px;
  }

  I’m happy with how it looks on the desktop. To make it more readable, I didn’t want it to stretch from end to end.

  Unfortunately, it’s also squeezed it together on the phone.

  Is there any way I can achieve the same idea without compromising the phone layout?

  Also, if you look at the menu on the phone, it sits in the middle of the screen and the menu options pop up over the web content.

  How do I fix this?

  Thank you in advance for reading this and your suggestions.

• 

  aleone89 · Staff · Sep 21, 2021 at 11:53 am

  • Copy link

  Hello there,

  It sounds like you would need to also write media queries with the CSS, to help dictate how the site looks on smaller screens.

  Please see more about this topic here: https://css-tricks.com/a-complete-guide-to-css-media-queries/

  I hope this helps.