Header Ads in mobile version disappears

Hi vagamundosblog. The default theme styling hides the header ads at 1200px viewport width to make room for the site title/logo and description on mobile screens. You can override that by adding this css to a child theme or custom css:

/* keep header ads visible on mobile screens */
@media only screen and (max-width: 1200px) {
  #header-ads {
    display: inline-block !important;
  }
}

Since the ads container has a float:right style it will stay to the right side of the screen as the viewport narrows. At the point that the menus collapse the ads container should move under the site title. To center it at that point you could try this css:

/* center header ads on smaller mobile screens */
@media only screen and (max-width: 719px) {
  #header-ads {
    width: 320px;
    left: 50%;
    margin: 0 0 0 -160px;
    position: relative;
    float: none;
  }
}

If you have problems or questions please post a link to your site. Thanks.

Hello, I have same case with vagamundosblog.

I have added the code you given above to custom.css but still not showing the header-add.

This is my site on desktop view: https://i.imgur.com/32fr60s.jpg
And this on Mobile view (on S Grand2): https://i.imgur.com/J69JAh8.jpg
Note: i set the image (header-add) width & height to auto size/100% value.

And still on responsive case, is there any ways to change display ex. on my galaxy grand 2 become like this responsive form (https://i.imgur.com/LI5Srra.jpg)?

Hey! That worked for me! Thank you bdbrown! I see riyadenn still have problems, so I won’t tag the topic as resolved, yet.

Hi, vagamundosblog. Thats worked for me now, since i added the code on child theme css. And about my responsive problem was also resolved in other thread. So you can make this topic resolved. Thanks a lot for you guys.

then solved ??