0

I have made a child theme of twentyfourteen. There is too much space between the left sidebar ("secondary") and the main content for my taste. But with the responsive design, there are many special cases (e.g. @media screen and (min-width: 1080px)). Do I need to go through each of those cases and provide detailed css changes, or is there a more elegant way?

If there's a good article out there that discusses this, please provide a link and I'll read up on this. Maintaining the responsiveness is important to me. Thank you.


@ManojKumar I haven't actually altered the standard twenty fourteen theme yet -- I've just set up the child theme in preparation for doing so. I am working on my own machine with XAMPP. The theme can be downloaded here: https://wordpress.org/themes/twentyfourteen/

  • 4
    What is your current code and output? – Manoj Kumar May 26 '15 at 8:40
  • 1
    Could you add a screenshot of which space you actually mean? – kraftner May 28 '15 at 14:30
  • 2
    There's no quick secret magic to do what you have in mind. Just half an hour of work of someone who has decent knowledge about css. As you pointed out, you need to edit more than one class, and check all the mediaqueries to be sure not to harm responsivenes. – bluantinoo May 30 '15 at 23:27
  • @bluantinoo, in a simple theme that doesn't have the mediascreen stuff, I can tweak css comfortably. – aparente001 May 31 '15 at 3:34
  • 1
    Please share a screenshot to explain what you're trying to ask. – Kavya Gokul Jun 1 '15 at 7:33
2
+50

Good Day aparente001,

I too had the same problem as you are referring to, so I know exactly what you are talking about. So to answer your question:

Do I need to go through each of those cases and provide detailed css changes, or is there a more elegant way?

You will have to go through creating a Child Theme (as you did already) of your current Twenty Fourteen and make the changes yourself as you were scared of.

Depending on the needs of your website, you probably will have to go through each cases that will be needed by your website, the "easy" way is to use a browser (I use firefox and Mac and it worked like a charm) and just resize it at the current case you are working on and you will see the modification right away (You can even see the "mobile" version by resizing it to the smallest. (I will be using a Mobile "theme" plugin because the mobile version of Twenty Fourteen is not the best).

My website doesn't need all the cases so it was fairly easy, it's a travel blog and I know that most of my friends that follow me will read it on their computer. But it's true that for a business or a wider range of audience website, Twenty Fourteen (even though it has an interesting look) is not the greatest.

That's exactly how I had to do it (you can see my results on Sly The Traveller).

It was made rather "quickly" so I know that mine is not even perfect, but as I said for my readers it doesn't need to be.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.