Responsive Issues

[angieatc]

I need some help with responsive aspects of this site please. Just 3 spots. Here is the site: http://www.homegrownfamilies.net/. I am also using a test site as an example as well.

1. The social media image is an image map and in the header right section. On a phone the links are all messed up. Would this because the site is responsive and it does not recognize image maps? I have tried this plugin here. I tried it on the test site here. When I test the responsive aspect of the image map on Screenfly the image map works but when I go to my phone the image map still does not work.

2. The bottom menu (pink) does not shift correctly either. This menu used to be full width and I made it not so I probably screwed something up somewhere but I am just not sure where.

3. On the test site the footer columns are not responsive or I should say they expand instead of shifting to become responsive.

Any help would be much apprecaited.

Thanks

---

My design site, Hill Springs Designs

[colson]

Angie you have a min-width set in your footer-widgets (starting line 1415 of your css) you need to take that out and then your footer widgets will work for mobile.

Corinne

[angieatc]

Thanks Corinne! That worked perfectly. I do have one more question and not sure if you can help me but on smaller devices the 3 column areas (below the slider) does not shift properly (it always has 2 columns then the 3rd column shifts down). I copied the column codes over from the Modern Portfolio theme but I still can't figure it out. What am I missing?

---

My design site, Hill Springs Designs

[colson]

I will look in a bit and get back to you 🙂

[colson]

Ok I did this quick I can look later and see if I can figure out why I have to use important. But if you but this in your media querys for @media only screen and (max-width: 480px) it should work (you may want to use a max-width: of 500 instead of 480 for media querys or something like that. I can look later to see why I needed important (I don't link to use it but was trying to figure something out quickly for you) I will be back on later and can look again.

#featured-full .featuredpost .post:nth-of-type(3n+2) {
float: none;
width: 100% !important;
}

#featured-full .featuredpost .post:nth-of-type(3n) {
float: none;
width: 100% !important;
}

[angieatc]

Thanks Corinne!

It worked! Responsive design is going to be the DEATH-OF-ME and so is the !important tag.

Angie

---

My design site, Hill Springs Designs

[Author]

Posts