I have been customizing a Wordpress theme for a client and I can’t seem to get the top of the homepage to scale correctly on my laptop or mobile. The rest of it is fine, seeing as it was coded by a pro:) I have a few elements going on in there, a slideshow, a logo, a background image, and a custom form built with gravity forms. I know if I play around with the background image I could probably get that to scale down using percentages. But since I have defined px sizes for the form and sliders, I am not sure how to make it all uniformly scale. Is this some basic css rules that I am missing or do I need to learn some responsive design techniques? Here is all the code so far…
HTML and Shortcodes
Oops…Guess that would have helped huh?! But the great Ralph.m conquered! lol Everytime I design on my big Mac (lol…big mac) I realize I need to change stuff when I look at it on laptop or phone. I really should make time to watch the responsive course I bought on Udemy.
The first problem I see is that the logo is positioned way outside the container, so it will be off screen for a lot of users. It might be better to make it smaller and place it above the slider and form.
Also, your slider and form together are too wide for the main container anyway. You either need to reduce their widths or work out some other layout for the top of the page.
So I should look at what size the existing container is and make sure all my code falls within those parameters? Also, is there any sort of rule of thumb when it comes to css to make sure it looks okay on other devices? Or is it just trial and error?
One thing I would recommend, however, is remove the logo from the background image and put it in the HTML itself, and include text with it (even if the text is hidden). The site name is very important (for SEO, accessibility etc.).