Target Design Elements on Mobile Devices Only

  • I’m trying to tweak the responsive design elements of my home page :

    https://www.razorweb.co.uk

    When the device width drops below about 768px a rather large space appears between the section title (Welcome To Mandody Media) and the main content. I’m not sure how to target this to make it narrower. If I adjust padding or margin on the title image, it effects all screen sizes. How do I target this element for only smaller devices?

    Many Thanks

Viewing 1 replies (of 1 total)
  • @media only screen and (max-width:768px) {
  .entry-content p:first-child > a > img  {
      margin-bottom: 0;
  }
}

    Can’t guarantee this but it’ll be close!

    These kind of edits should be added to a child theme style.css or using a custom css plugin or if it has it, the theme function for the same.

    Media queries go at the end of the style sheet

    Hope it works!

Viewing 1 replies (of 1 total)
  • The topic ‘Target Design Elements on Mobile Devices Only’ is closed to new replies.