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 ?
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:
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
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.