Can you help with how to maintain the responsiveness of these elements on tablet and mobile environments?
The first thing you want to do is remove the inline style and add it to your child theme’s style.css file (or to the end of your custom CSS; I see you are using both). Inline styles are very difficult to modify using CSS, and to make the elements responsive, you’re going to want to use media queries in your CSS.
For example, in the header image, you have this:
<div class="slider-main">
<div class="top-bar">
<h2 style="font-size: 60px; color: #000000;"><strong>Silver Lining of Life</strong></h2>
<h1 style="font-size: 30px;">Lubbock Counseling Services</h1>
<h1 style="font-size: 30px;">Staci Rocha, M.A. LPC</h1>
</div><!-- top-bar -->
Remove the inline style that sets the font-size & color, then in your child theme’s style.css file, add this instead:
.slider-main .top-bar h2 {
font-size: 60px;
color: #000000;
}
.slider-main .top-bar h1 {
font-size: 30px;
}
Now we can add some media queries to change the font size at different view port widths:
/* These rules are for tablets */
@media only screen and (max-width: 768px) {
.slider-main .top-bar h2 {
font-size: 40px;
}
.slider-main .top-bar h1 {
font-size: 25px;
}
}
/* These rules are for cell phones */
@media only screen and (max-width: 350px) {
.slider-main .top-bar h2 {
font-size: 30px;
}
.slider-main .top-bar h1 {
font-size: 20px;
}
}
Note that the rules inside the media queries are the same as the original rules, except for the values of font-size (change the values as you prefer). The first media query kicks into affect once the width of the screen goes below 768px, the width of an iPad. You can see the media queries in action by adjusting the width of your desktop browser.
For cell phones, I picked 350px. Some people use 320px, others use 480px. Cell phones, of course, come in many different widths, so pick a width that you are comfortable with. You can actually go pretty crazy & add queries depending upon whether the device is in landscape or portrait mode.
The only thing you need to remember is that your media queries should go at the very end of your stylesheet, after the normal rules, so that the normal rules don’t override the media queries.
However, doing that causes the elements (the three services boxes) to be off-center on a computer screen.
For the service boxes, you should not assign them the same ID. Technically speaking, there should only be one unique ID per web page element. If you want to assign the same identifier to multiple elements, use a class, instead. So change services-box from an ID to a class, and then in your CSS rules, change #services-box to .services-box. I see that there are already rules for .services-box. Did you change the classes to IDs? Go ahead and change them back.
In your CSS, you have a couple of problems:
.services-box {
max-width: 28%rem;
}
You can’t combine percent with rem. I assume you want percent, so remove the rem from this rule. Actually, remove this rule altogether, because we’re going to use a different one. Also, center is not a valid value for the float property.
I see there are already a bunch of media queries which affect the service boxes. Let’s add some others to override some of those rules:
.services .services-box {
width: 32%;
max-width: none;
box-sizing: border-box;
}
.services .services-box img,
.services .services-box h2
{
margin: 0 auto;
display: table;
font-size: 22px;
}
The first rule sets the width to be about a third of the container width, so they will automatically be “centered.” The second rule centers the images and headings within the service boxes. You’ll just need to add a media query so that the service boxes stack on top of one another at mobile screen widths so they don’t look squashed:
@media only screen and (max-width: 768px) {
.services .services-box {
width: 100%;
}
}
is there a way to remove the navigation arrows on the Home Page Slider?
Add this CSS rule:
.nivo-directionNav {
display: none;
}
