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/

Improve this question
5
  • 4
    What is your current code and output?
    – m4n0
    Commented May 26, 2015 at 8:40
  • 1
    Could you add a screenshot of which space you actually mean?
    – kraftner
    Commented May 28, 2015 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
    Commented May 30, 2015 at 23:27
  • @bluantinoo, in a simple theme that doesn't have the mediascreen stuff, I can tweak css comfortably.
    – aparente001
    Commented May 31, 2015 at 3:34
  • 1
    Please share a screenshot to explain what you're trying to ask.
    – Kavya Gokul
    Commented Jun 1, 2015 at 7:33

1 Answer 1

Reset to default
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 and acknowledge you have read our privacy policy.

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