MOBILE RESP.

• 

  protectapak · Member · Aug 18, 2014 at 11:08 pm

  • Copy link
  • Add topic to favorites

  The mobile version of my front page (the text) is going off and the “MENU” tab not sure whats wrong…

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

• 

  thesacredpath · Member · Aug 19, 2014 at 3:39 pm

  • Copy link

  Hi, I’ve looked over your CSS and suggest the following changes and additions. Find the following two rules in your custom CSS and replace them with these.

  #home-banner #banner-text {
  	max-width:700px !important;
  	text-align:right;
  	display:inline-block;
  	margin-right:50px;
  	position: absolute;
  	top:0;
  	right: 0;
  }
  
  .wf-active #home-banner #banner-text .secondary {
  	margin-right: 0;
  	display:inline-block;
  	position: relative;
  	top: 0;
  	right: 0
  }

  Replace the existing 424px media rule we previously added (at the bottom of your CSS with the following two Media Queries.

  @media screen and (max-width: 600px) {
  	#home-banner #banner-text, #home-banner #banner-text .secondary p {
  		max-width: 320px !important;
  	}
  }
  
  @media screen and (max-width: 424px){
  	#home-banner #banner-text, #home-banner #banner-text .secondary p {
  		max-width:250px !important;
  	}
  
  }

  See what you think and let me know.

• 

  protectapak · Member · Aug 19, 2014 at 4:02 pm

  • Copy link

  It worked. By the way on the media queries which one would I know that it is for tablet and smartphone?

• 

  thesacredpath · Member · Aug 19, 2014 at 4:14 pm

  • Copy link

  Smart phones are typically 320px by 480px. I chose 424px as that seemed to be where things sort of went awry and it seems to work for smart phones in portrait orientation and the 600px query works down past 480px.

  Sometimes it just takes a little playing with things to see where you need to add a query. Your site is a little unique due to the way you have configured your home page.

• 

  protectapak · Member · Aug 19, 2014 at 4:21 pm

  • Copy link

  I see. I was using this code before but wasnt working...http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

• 

  protectapak · Member · Aug 19, 2014 at 4:23 pm

  • Copy link

  but i guess I need to style it after

• 

  thesacredpath · Member · Aug 19, 2014 at 5:17 pm

  • Copy link

  Sometimes, due to other design decisions, interim media queries can be required. Generally you can target only the trigger points they list, but what can happen is that things in between can go awry for people that may have their browser window set inbetween some of the standard trigger points, such as between 768 and 1024, or between 768 and 480. My attempt with the code I gave was to make things look good all the way down and in-between all the normal settings. I do this by slowly narrowing down my browser window (I have a Firefox extension that shows me browser window width) all the way down to smart phone size and see what happens and then create any additional media queries needed.

• 

  protectapak · Member · Aug 19, 2014 at 5:25 pm

  • Copy link

  ok Thanks for your help!

• 

  thesacredpath · Member · Aug 19, 2014 at 5:57 pm

  • Copy link

  You are welcome.