Image resizing mobile version

• 

  cityblastapp · Member · May 24, 2017 at 4:39 am

  • Copy link
  • Add topic to favorites

  Hello,

  I’m having a problem with my images in the mobile version: one is larger than the other and I can’t seem to find the problem.

  Thanks in advance,

  Fernanda

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · May 24, 2017 at 8:02 am

  • Copy link

  Hello Fernanda,
  It a bit tricky to handle grid layouts with tables, because they act weirdly sometimes.

  In your case, the images are different sizes on mobile because the name “FERNANDA DELGADO” is too big for the left column and hence it is taking up too much space on the left thereby squeezing the right column.

  So to solve that you can reduce the font size of the names(on mobile only).
  Use this CSS to do that:

  @media only screen and (max-width: 640px) {
      h3 {
          font-size: 1rem;
      }
  }

  This will reduce the font size of the names when the resolution width is below 640px.

  Hope this helps 🙂

• 

  otpidusprime · Member · May 24, 2017 at 9:20 am

  • Copy link

  CORRECTION:
  It’s* a bit tricky

• 

  cityblastapp · Member · May 24, 2017 at 12:12 pm

  • Copy link

  Thank you so much!