Paul Sutton

Troubleshooting WriteFreely Blogs

I have recently been on the forums for WriteAs asking about ironing out a few issues with my blog.

First issue that I asked about was the pinned entries being being split over 2 lines. this can be fixed with no wrap :

Reference this thread in the WriteAs forum.

.pinned{ 
    color: #0000ff;
    background-color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    text-decoration: bold;
    white-space: nowrap;
}

However, this then throws up another issue on my netbook, which has a smaller screen in that, the line of entries causes the page width to expand to allow for a long line of entries.

So a way round this could be to use a media query. to change the property back to normal on smaller screens. A quick look at W3Schools has the following example.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

So to adapt this we need to apply the rule to .pinned so at present we have:

white-space: nowrap;

So using a media query we change this to normal

@media only screen and (max-width: 600px) {
  .pinned {
    white-space: normal;
  }
}

So after some experimentation to get the max-width set properly.

@media only screen and (max-width: 1024px) {
  .pinned {
    white-space: normal;
    background-color:red;
  }
}

I just added the **background color** property for testing purposes.  So have removed this from the custom css for my blog.

So adding the media query then makes the site menu appear wrapped if the screen size is at or below 102px (pixels)

So this needs a little refinement but it fixes the initial problem, that cropped up after fixing another issue.

I now appreciate the life of a web builder is never done, but the learning experience is invaluable.