Blank space at the side of the page & theme for mobile & tablet

• 

  thenameofthenextsong · Member · Nov 17, 2014 at 7:23 pm

  • Copy link
  • Add topic to favorites

  Hi there

  how can I delete the blank space at the side of the webpage? Also, how can I make the design fit to the mobile and tablet screen – is there a css I can use for this?

  this is the css, not sure I am doing things right (?)

  /*Size logo in the header*/
  #header-image-link img {
  display: none;
  }

  #header-image-link {
  display: block;
  background: url(‘//thenameofthenextsong.files.wordpress.com/2014/11/cropped-logo-blog-img-page-0012.jpg’) no-repeat;
  width: 1191px;
  height: 842px;
  zoom: 1.4;
  left: 40px;
  }

  #footer {
  border: none;
  }

  #header {
  padding-bottom: 3px;
  border: none;
  }

  #branding {
  min-height: 0;
  }

  /*position Main Menu*/
  #header-left {
  position: relative;
  width: 300%;
  top: 80px;
  left: 570px;
  right: -400px;
  }

  /*position Second menu*/
  #header-center {
  position: relative;
  width: 300%;
  top: 10px;
  left: 750px;
  right: -400px;
  }

  /*position search widget */
  #header-right {
  position: relative;
  width: 100%;
  top: 30px;
  right: -1000px;
  }

  Many thanks in advance

  Valentina

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

• 

  hallluke · Member · Nov 18, 2014 at 2:10 pm

  • Copy link

  What are you trying to achieve? The parts where you set header section widths to 300% are definitely part of the problem! If you explain how you want things to be position relative to the default appearance we can help provide some better code to use.

• 

  thenameofthenextsong · Member · Nov 19, 2014 at 10:52 am

  • Copy link

  Many thanks for your answer.

  I was trying to enlarge the logo and have it on the left, and having the menus on the right.

  Should I try to reduce the width?

• 

  hallluke · Member · Nov 19, 2014 at 12:40 pm

  • Copy link

  If you want to use a larger image you need to upload it at size you want. If you try stretching the image with CSS it will look terrible!

  Here’s something to try, it will add the image in at a normal size and move the menu sections to the left and put the search bar between them and the header image.

  First you’ll need to delete all of this in your existing CSS:

  #header-image-link{
    display:block;
    background:url('//thenameofthenextsong.files.wordpress.com/2014/11/cropped-logo-blog-img-page-0012.jpg') no-repeat;
    width:1191px;
    height:842px;
    zoom:1.4;
    left:50px;
  }
  
  #header-left{
    position:relative;
    width:100%;
    top:80px;
    left:570px;
  }
  
  #header-center{
    position:relative;
    width:60%;
    top:10px;
    left:750px;
    right:-30px;
  }
  
  #header-right{
    position:relative;
    width:60%;
    top:30px;
    left:800px;
  }

  and replace it with this:

  #header-image-link{
    display:block;
    background:url('//thenameofthenextsong.files.wordpress.com/2014/11/cropped-logo-blog-img-page-0012.jpg') no-repeat;
    width:210px;
    height:151px;
  }
  
  #header-right {
    float:left;
  }
  
  #header-left, #header-center {
    float:right;
  }

  Let me know what you think!

• 

  thenameofthenextsong · Member · Nov 19, 2014 at 12:59 pm

  • Copy link

  Many thanks! it looks much much better now!

  Could I ask one more question? If I want to move the menus a bit to the right, what should I do?

  Thanks again!

• 

  designsimply · Member · Nov 22, 2014 at 9:49 pm

  • Copy link

  If I want to move the menus a bit to the right, what should I do?

  A quick trick I used sometimes to visualize where blocks are on a page is temporarily surround them with a red border just while I’m working in the preview. Here is an example you can try (don’t save this, just view it) in Appearance > Customize > CSS:

  #header > div {
  	border: 2px dashed red;
  }

  One way to move the menu to the right would be to add a left margin to the 2nd box. The 2nd box has id=”header-left” in the HTML, so you can use that in your CSS selector like this:

  #header-left {
  	margin-left: 40px;
  }

  Adjust the 40px value as needed.

  You might also like:
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

• 

  thenameofthenextsong · Member · Dec 1, 2014 at 6:29 pm

  • Copy link

  Many thanks :)