[tlrome]

I think I broke my CSS and can’t find the problem. I’m hoping someone here will have the answer. I am updating the child CSS, not the original. The social icons display as intended in the footer (color always), but not in the header. There the icons display in color until I move my cursor over the image, then it disappears entirely. Can’t figure out what the problem is. Please help.

http://www.sevenportions.com

[Sakin]

@tlrome: Looks like you have added custom css from Jetpack Plugin in “Appearance => Edit CSS”, where you have to delete the background none in the following css
.widget ul > li a:hover,a:focus,a:active{color:#1982d1;background:none;text-decoration:underline;font-style:italic}

Note: Also I see that you have change the width of the columns and this is effecting responsive design. When you change the width of the column you either need to disable the responsive design or you need to change the widget in various responsive devices width.

[tlrome]

Thank you! I made the change to the CSS and fixed the problem.

Now, about responsive design — can you give me an example? I’m not sure I fully understand this feature. Is there a good link that will describe it? I’m no novice, but it’s been a long time since I did any real coding. I’m okay at hacking small bits of code, but I do know my limits.

[Sakin]

@tlrome: Catch Evolution Theme uses the following Media screen for the responsive design. So, when you edit the width in normal css, you need to think about the following media screen, which are defined in responsive.css file.

@media screen and (max-width: 1224px) {

}
@media screen and (max-width: 1060px) {		

}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}
@media screen and (max-width: 960px) {	

}

@media (max-device-width: 960px) {	

}

@media screen and (max-width: 767px) {

}
@media only screen 
and (min-width: 480px) 
and (max-width: 767px) {

}
@media screen and (max-width: 479px) {

}
@media screen and (max-width: 320px) {

}

But if you want to just modify the width only in large screen and leave the small screen as it is then, there is simple trick to use min-width, which will allow you to modify only for large screen.

/* For Screen Size with 1225px and higher */
@media screen and (min-width: 1225px) {

}

Fore more details about Media Queries tutorial, Click Here

[Author]

Posts