Mobile Web help – Ixion Theme

• 

  cthaw24 · Member · Feb 24, 2017 at 4:07 pm

  • Copy link
  • Add topic to favorites

  Hi,

  We’ve received some awesome help setting up our site with CSS customization here, but I’ve recently noticed that some of the CSS edits made on desktop don’t look great on mobile.

  Is there a way to ignore some custom CSS edits on mobile, while having all the custom CSS edits on desktop?

  Specifically, we don’t want the ‘Baseball’, Football’, ‘Basketball’ wording above the featured content to show on mobile. And we want the recent posts to show Image, then title, then description rather than the image on the side like on desktop.

  Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 24, 2017 at 10:10 pm

  • Copy link

  Hi there, it looks like the words above the featured images on the main page work down to around 660px in width. What we can do is use a Media Query to limit that change to screens/windows 660px and wider. Wrap your three CSS rules in a Media Query so that it looks like this. Note the second ending curly bracket below the last CSS rule.

  @media screen and (min-width: 660px) {
  .featured-content article.category-baseball:before {
  	content:'Baseball'
  }
  .featured-content article.category-football:before {
  	content:'Football'
  }
  .featured-content article.category-basketball:before {
  	content:'Basketball'
  }
  }

• 

  cthaw24 · Member · Feb 27, 2017 at 4:37 pm

  • Copy link

  Great, thank you this worked very nicely!

• 

  thesacredpath · Member · Feb 27, 2017 at 9:31 pm

  • Copy link

  Awesome, and you are welcome!