Responsive home page

• 

  cedecasite · Member · Jul 18, 2017 at 2:42 pm

  • Copy link
  • Add topic to favorites

  Hi! I am having issues with my homepage in the mobile version.
  Most notably, the “Participe” page on the homepage does not correclty resize, and the buttons are overlapping.

  Also, the “Nossa Missao” page does not correctly fill the screen and the text does not resize.

  Is there some CSS I could use to fix these problems?

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

• 

  solybarr · Member · Jul 18, 2017 at 4:15 pm

  • Copy link

  Hi @cedecasite,
  what Theme are you using?

  From your code (For the Participe buttons), you might want to replace the floats on your inline CSS for the divs to display:inline-block. That will give better results.

  Let me know if this helps.

• 

  cedecasite · Member · Jul 18, 2017 at 4:31 pm

  • Copy link

  Hi @solybarr. Thank you for your response.

  I am using the theme Purpose.

  I tried replacing the floats with display:inline-block as you suggested, but unfortunately there was no change.

  Any other ideas? Thanks again!

• 

  solybarr · Member · Jul 18, 2017 at 4:38 pm

  • Copy link

  @cedecasite,
  I see the Participe buttons look better on Desktop/Tablet but not on mobile.

  You might have to write a Media Query for that. :( I don’t think that can be done inline (let me check)

  I saw that the “Nossa Missao” text IS using a Media Query but its being overwritten, that is why it only goes a little bit smaller when you view it in Mobile.

• 

  solybarr · Member · Jul 18, 2017 at 4:41 pm

  • Copy link

  @cedecasite,
  I see Purpose is a Premium theme!
  You might find your answer here > https://premium-themes.forums.wordpress.com/forum/purpose

  Also, it could be a theme glitch. I’ll tag the post to see if it can be fixed.

• 

  cedecasite · Member · Jul 18, 2017 at 5:20 pm

  • Copy link

  @solybarr

  Yes I do think I need to write a Media Query for it. Do you have any suggestion for what the CSS would look like?

• 

  solybarr · Member · Jul 18, 2017 at 5:59 pm

  • Copy link

  @cedecasite, I tried to test it with Chrome tools but it didn’t allow me.

  For the “Nossa Missao” text (which is an h3) you can test this out

  @media (min-width: 320px) and (max-width: 480px) {
    h3 { font-size:0.75em;}
  }

  The other ones are a bit more complicated. Hopefully someone else can help us with that.

  I took that media query code from this Gist > https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

• 

  cedecasite · Member · Jul 18, 2017 at 6:33 pm

  • Copy link

  @solybarr
  That code did not work. Thank you anyway.

  I got help from someone else. Here is what worked:

  /*Homepage responsiveness*/
  @media handheld, only screen and (max-width: 767px){
    .text-holder{
       font-size: 10px;
  	}
    .featured-pages .holder {
      padding: 20px;
    }
    .featured-posts .holder {
      padding: 20px;
    }
    a.button {
      padding: 3px;
    }
  }