Need small help with CSS for homepage

[Shobha22]

On the new site I'm building at http://blogbillionaire.com (using Agency-Pro theme), I have two areas of my home page where I need help:

1. I have a black box to the left of the screen, just above the fold. (The headline of this black box is "POWER BLOGGING FOR AUTHORITY, INFLUENCE AND AFFLUENCE ..."). When this black box is seen on a mobile screen, there are word breaks which I want to avoid ... and also I'd like the font size to be smaller for mobile. What CSS code should I add - and to which part of my theme-css file - to avoid word breaks and to make the font smaller for mobile screens? This box is part of my HOME-TOP widget area.

2. In the HOME-Middle widget area of my theme I have used three Featured Posts widgets one below the other to create my lists of posts. Here the theme by default has a mouseover effect so when we hover over the pictures, the underlying text shows up. This looks bad on mobile though. So I want to remove this mouseover effect totally and have the pictures just static. How do I tweak the theme CSS file (and where?) to remove the mouseover effect from these widgets?

Thanks for the help.

Regards,

Shobha Ponnappa

http://blogbillionaire.com

[Ginger]

Hi Shobha,

I noticed you have a lot of inline styling on the text widget box at the top, is that from a tool you're using or did you put the styling in the text box? I'm asking since it would be a lot cleaner to put that in your style.css and I can give you tips on how to do that. You can use a class name, say we call it black-box. In your text widget you'd enter

<div class="black-box">
put your text here

</div>

Then in your style.css file add a new section above the media queries at the bottom :

.black-box {
put your css in here
}

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Shobha22]

Thanks for the tip.

But I am looking to reduce the font size only for mobiles and want to know how and where to add the @media query.

[Ginger]

Right, to make that easier, it's best to have all of your styling in your style.css for that reason and to know what to target.

However, to answer your specific question, open your style.css with a text editor and scroll to the bottom and you'll see what are referred to as break points. The smallest entry is a max-width of 480px which is all of your mobile phones. To style for those screens you'd put your entries inside the brackets of that section. To target your text box widget content to style will be a challenge since you've hard coded the styling. I recommend re-writing it using my suggestion above. Then in your media section, you'd reference the same class name with styles that would change the font size, etc.

One more tip, you're using an H1 tag in that text box -- this is not recommended. For SEO purposes you should only use one H1 tag per page. This is taken care of for you in your header area - the logo link already is formatted with an H1.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Author]

Posts