1

I am working on a website (built on WordPress custom theme) in which I have to make responsive web design.

In that website, I have to replicate the mobile design from the PSD so that it looks good on all devices.


Problem Statement:

The website is built on wordpress custom theme.

In order to make the website responsive, what I have done is on seeing HTML code after doing inspect, I have written CSS codes in the Additional CSS section of the wordpress.

Here is the sample fiddle (In it the HTML code is copied from the inspect section of the website) which I have created.

The HTML code from the fiddle is coming from the inspect section of the website and I have added the CSS codes in the Additional CSS section of the wordpress website.

The snippets of HTML code which I have used is:

<tr class="alt">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello World</a></td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>           
</tr>

<tr class="">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello Universe</a></td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>         
</tr>


My question is if its the right way to make the responsive web design for the website built on wordpress custom theme ?

john
  • 11,311
  • 40
  • 131
  • 251
  • 1
    I think you're on the right track, John. You have put the CSS in the Additional CSS section. Additional CSS section or child theme CSS will not get overwritten if your theme updates. Based on the fiddle, you have used media queries. So I think you are on track. – Hamza Ahmad Oct 03 '18 at 04:55
  • @HamzaAhmad Hi Hamza, I have a similar [question](https://stackoverflow.com/questions/52685059/how-to-ignore-the-specific-css-codes-coming-from-the-wordpress-plugin-stylesheet/52685131#52685131). I am wondering if you can have a look. It is something related to plugin css. My website was working properly before but somehow addition css showed up in mobile view which has caused the design to change completely. I am not sure how this additional css codes showed up. – john Oct 07 '18 at 03:39

1 Answers1

1

There will be two parts two this.

For responsive design you are on the right path. You are using media queries in your CSS, no problems there. The problem might come from trying to build on a custom theme that isn't responsive already. But I would encourage you to read about mobile first design if you haven't already.

What most of us do is write the HTML and CSS theme and then combined that with Wordpress by creating a custom theme. You create a custom theme in two ways:

Child Theming

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

It's up to you what theme you want to pick, but ideally you want to choose a theme to child theme that resembles the design you have created in Photoshop as closely as possible.

Or by creating your own theme(Link to great starter playlists.) There also templates you can use to start your theme development such as underscores

Ok given that you have a custom made theme that you're working on you can choose to edit the theme directly (I would advise against this if you don't know the theme creator), create a child theme from the custom theme, or just make a new theme that looks the same (I would be careful with this if you don't know the theme author).

For CSS the new standard for design is using flexbox, or CSS grids. Here's a great article on those.

You could also use a CSS framework which you'll have two choices:

Component Based CSS Framework

This is when there are prebuilt components such as navigation, articles and sometimes modals.

List of Component Based Frameworks

  • Bootstrap
  • Foundation
  • Bulma
  • Materialize

Or you could use a utility css framework like tailwind css. Utility frameworks give you greater control over the look of your css without having to actually write much css at all by just adding various pre-made classes to your html structure.

For a better explanation on Utility frameworks go here.

user3325126
  • 1,284
  • 4
  • 15
  • 36
  • thanks for detailed explanation. I have asked this [question](https://stackoverflow.com/questions/52685059/how-to-ignore-the-specific-css-codes-coming-from-the-wordpress-plugin-stylesheet/52685274#52685274) from Hamza as well above. I am wondering if you can also have a look. It is something related to plugin css. My website was working properly before but somehow addition css showed up in mobile view which has caused the design to change completely. I am not sure how this additional css codes showed up. – john Oct 07 '18 at 03:45