How to made css changes for specific devices

I notice that some changes that I manage to achieve for desktop and tablet screen sizes are not consistent with smaller screen sizes. The easiest way to observe this is to change the browser widths and what what happens.

On my front page at say-write.com, I have managed to remove a default css styling for the article block, but when the browser window gets small enough, it returns. That means I need a particular hack to stop this css styling on the Front Page. I have initiated a site-wide styling for article because most of the content will be ‘page based’, while the front page is almost purely a graphic based element.

I have been using ‘background:none !important;’ for the article block on the site’s Front Page, using a page-specific custom css tool, while the author block is otherwise styled in the custom css in the theme customize window.

So – how to modify these device elements. I know you made the theme responsive and mostly mobile, and for that, I salute a brilliant job. Just need to get my head around how to customise the look across devices.