Media Queries

[DWuser973]

With Media Queries, are you able to change the content of the page completely?  for example, replacing the top banner with a text? 

Thanks

[BenPleysier]

Yes. See for more: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[osgood_]

Yes, you can BUT you would need 2 components (divs) on your page, 1 for the banner and 1 for the text. You would show or hide which component (div) is viewable based on the users screen width using media queries

Example. You want to hide the 'text' component (div) on desktop devices and show it on tablet/smartphone devices and hide the 'banner' component on tablet/smartphone devices.

// Initially set 'text' div to display none

.text {

display: none;

}

// Once the brower viewport is 768px wide then show the 'text' div and hide the 'banner' div

Media@mercycity.church screen and (max-width: 786px) {

.text {

display: block;

}

.banner {

display: none;

}

}

This is the simplest way but the downside is that both components still get downloaded by the browser which may not be desirable. You can swap the contents of a component (div) using Javascript, which is probably a more 'efficient' method but slightly more complex.

[B i r n o u]

with regard to a large volume of information on a page, (you mention in your question the term completly), as OS tells you you could show/hide areas of your content.

But beware!

On the one hand, the bandwidth will be increased for content that will be loaded and not displayed, but also it will require a content strategy a bit anarchic ... and not refined and chiseled as it should be. (Be careful however that the content brings the same information, whatever the device) ... on this subject, https://www.puce-et-media.com/en/part-i-why-responsive-websites-are-not-just-a-simple-step-for-websi...

All this to say that if you really want to adapt the contents in a deep way, use media queries coupled with AJAX mechanisms in order not to load contents that remain unnecessarily hidden on your pages.