How could I stop header area / tagline crashing together on mobile size?

[Joy G]

My site is: joygodfreyplaytherapy. co.uk

Does anyone know how I could stop the site-description and the call-to-action (header right) crashing into each other when the screen is squashed to mobile size?

Thanks!!

[ᴅᴀᴠɪᴅ]

It has gone wrong because the description AND a logo is being used, which wasn't how the theme was originally designed. A simple way of stopping them stepping into each other is to add some padding between theme. But first, you will need to remove the styling from the widget area.

At the moment there is

style="text-align: right; inside the html.

Once that is removed you can style it all from the stylesheet by adding..

.site-header .call-to-action {
   text-align: right;
}

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

   .site-header .call-to-action {
      margin-top: 40px;
      text-align: center;
   }

}

and then just play around with the margin etc until you're happy.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Joy G]

Thanks David!! That was great! I sorted it out straight away with that.

[Author]

Posts