Responsive Header

thedaltonquilty · Member · Jul 6, 2017 at 2:14 pm
Copy link

Add topic to favorites
Hi,

I need help making my header image responsive. I’ve tried various ways I’ve found online and none have worked.

I currently have this at the bottom of my CSS.

@media screen and (max-width: 550px) {
.header-bg {
background-size: 149%;
background-color: #fff;
}
}

Any ideas?

The blog I need help with is: (visible only to logged in users)
crazywickedawesome · Member · Jul 6, 2017 at 3:27 pm
Copy link
Hi, you might want to try this bit of code
```
.header-bg {
	background-size: 149% !important;
}
```
Let me know if that helps!
thedaltonquilty · Member · Jul 6, 2017 at 3:30 pm
Copy link
Thanks for your reply.

Unfortunately it didn’t, I’m stumped!
jaymendoza34 · Member · Jul 6, 2017 at 6:36 pm
Copy link
Hi,

Can you try the following:
```
@media screen and (max-width: 550px) {
    .header-image {
        background-position: left;
    }
}
```
Let me know if that works for you.

Regards,
Jay
thedaltonquilty · Member · Jul 6, 2017 at 11:27 pm
Copy link
That worked perfectly! thank you so much!

One last thing, my social links menu underneath the image is not responsive either, any ideas how to do this? a similar code like above?
thesacredpath · Member · Jul 7, 2017 at 1:08 am
Copy link
Hi @thedaltonquilty, are you talking about the one to the right, in the Widget area? The sidebar and widgets will move down below the content on smaller screens to keep your content the most prominent thing on your site on mobile and smaller touch devices. When I look at that widget on my phone, it is there and is working as designed for me.
jaymendoza34 · Member · Jul 7, 2017 at 1:10 am
Copy link
Great to hear! No problem. :)
thedaltonquilty · Member · Jul 7, 2017 at 1:23 am
Copy link
Hi @thesacredpath

I think we’re talking about the right one, the links to spotify/apple music/twitter etc underneath the main image, I have a iPhone 5C and it needs to be scrolled to the right to see the rest of the links, tried it on a 6S and it fits just about!
thesacredpath · Member · Jul 7, 2017 at 4:20 am
Copy link
Ah, not sure how that happened, but I ended up on the wrong website. You have a static width of 370px set in your footer-social-icons CSS rule and since the iPhone 5c/5s has a width of 320px, then it forces things off to the right. I expect the reason that you set the 370px width was to keep the icons all on one line, but we need to think of a different way that is acceptable to you. Let’s try this. Change your existing CSS rule to this
```
.footer-social-icons {
  max-width: 370px;
 display:block;
 margin:0 auto;
 margin-top:10px
}
```
and then let’s add this at the very bottom of your custom CSS.
```
@media screen and (max-width: 400px) {
  .footer-social-icons {
    max-width: 220px;
    text-align: center;
  }
  .social-icons li {
    margin-bottom: 40px
  }
}
```
thedaltonquilty · Member · Jul 7, 2017 at 1:06 pm
Copy link
Hey @thesacredpath

So this did fix the need to scroll right, however its caused 2 rows of links, 3 on top and 3 on the bottom, if you get me, of which they seem to overlap slightly.
thesacredpath · Member · Jul 7, 2017 at 7:53 pm
Copy link
Hi, change the media query I had given you to the following.
```
@media screen and (max-width: 400px) {
 .footer-social-icons {
  max-width:220px;
  text-align:center
 }
 .social-icons li a {
  margin-bottom:5px;
   display: inline-block;
 }
}
```
The six icons are too wide to fit on one line across on smaller phone screens (400px and narrower), which is why I configured things to go into two rows of three in the Media Query.
thedaltonquilty · Member · Jul 10, 2017 at 6:05 pm
Copy link
Hi @thesacredpath

Thanks very much for all your help, it’s much appreciated. The client and I have decided to reduce the number of links to 4, so everything should fit more snug now. Thanks again!
thesacredpath · Member · Jul 10, 2017 at 10:07 pm
Copy link
You are welcome.

No items found.