Making Montana Webmaster Responsive - Montana Webmaster

Making Montana Webmaster Responsive

What Is Responsive?

Photo of various screen sizesBack in the old days between 1990 and 2010, the resolution of computer monitors was mostly 800 x 600 or 1024 x 768. Responsive wasn’t a thing in most web development. That is, until those darn smart phones came along showing web pages in a vertical screen, not a horizontal screen and making viewers scroll sideways and up and down. Both viewers and developers were annoyed.

The world of web development changed. The thing about that lovely watercolor you bought at a gallery is that it’s the same size every time you look at it. not so much with websites. Website have to morph to fit whatever size screen the viewer is using at the moment … and it has to morph for all sizes that might come along in the future.

What if I Have a Responsive Theme?

Screenshot of Montana Webmaster Meta Slider in mobileMy WordPress theme, Kahuna, is responsive, sort of. There are two ways to think about a theme being responsive. 1) It starts with a horizontal, desktop/laptop layout and morphs to a vertical/smaller screen. 2) It starts with all screen sizes in mind, often the reverse of #1. The fact that it’s a “theme” implies that the graphic artists are involved with layout, colors, spacing, etc. The other aspect of each page is the programming to bring the elements into that design are involved after the design is finished.

With a WordPress site, it’s not only the theme that has to be responsive, but plugins that create parts of a page have to be responsive, as well. The first item that needed responsive adjustment on the MontanaWebmaster.com site was the home page slider. The slider is not a part of the theme. Instead, it is created by the MetaSlider plugin. While the slider resized just fine, the caption text started at the bottom of the image and sized upwards, covering the image. So, the CSS (layout) coding for the slider caption had to make the position of the caption start at the bottom of the image and size downwards.

The Problems are Mostly in the Spacing

Mobile versions of your website need to have the same care for spacing as the default version. On my site, the business name is crowded up to the left side in the smallest mobile version.

In the WordPress Kahuna theme customizer, you can control the words and color of your title and subtitle, but you cannot control the positioning. So, the changes have to be made in the CSS code. Now that I know what the outcome should be, I need to find what code to change. To do that, I will use the Developer Tools in Chrome.

Screenshot of mobile site and Chrome developer tools.

Note that the tool shows that the title block is called site-text. The column on the far right shows the CSS code that provides formatting rules for the layer. Notice that it has float: left; , but there is no padding or margin to give it a little space. So, I will go to the file structure and add a rule for spacing.

There are two ways that I can access the files. The first is through FTP software that allows me to download a copy of the file into my computer and then re-upload it with changes. The second is through the WordPress File Editor tool.

Resources

https://www.nngroup.com/articles/computer-screens-getting-bigger/

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.