individual div for posts responsive

• 

  mariagserra · Member · Oct 20, 2015 at 12:10 pm

  • Copy link
  • Add topic to favorites

  hey

  so i created an extra div inside my post (directly in my post edit page) but i can’t make it responsive. So when my browser has a big size it looks really good and the way i want it, but when i resize it it goes in top of pictures for example, and wherever that is inside the post.

  So in my post i added this:

  <div class=”explanation”>
  <p>extra info goes here</p>
  </div>

  an in my css style sheet i added this:

  div.explanation {
  /* fixed within viewport */
  position: fixed;
  /* set position */
  top: 190px;
  right: 220px;
  /* must have dimension */
  width: 300px;
  height: 200px;
  }

  the point is, when the browser is big i want it to stay on the right, fixed. But is is 1025 or smaller i want the extra info to go to the end of my post content… But i cant make it work.. What am i doing wrong? Any help?

  here is the page where it is:

  http://mariagserra.stathiskanterakis.com/?portfolio=wayfinding-minerva

  thanks in advanced

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

• 

  g471n · Member · Oct 20, 2015 at 2:18 pm

  • Copy link

  Hi mariagserra

  It looks like you are using a self hosted WordPress.org installation.

  This support forum is for sites that are hosted with WordPress.com. For self-hosted WordPress sites like yours, you can get help in the WordPress.org support forums – http://wordpress.org/support.

  —
  WordPress comes in two flavours. WordPress.com and WordPress.org

  This article does a good job of explaining the differences –http://en.support.wordpress.com/com-vs-org/

• 

  g471n · Member · Oct 20, 2015 at 2:24 pm

  • Copy link

  What I think you need is a media query. Have a look at http://www.w3schools.com/cssref/css3_pr_mediaquery.asp for a full explanation.

  Your CSS would look something like this.

  @media screen and (min-width: 1025px) {
  	div.explanation {
  		position: fixed;
  		top: 190px;
  		right: 220px;
  		width: 300px;
  		height: 200px;
  	}
  }