Media Queries

New Here ,
Dec 07, 2020 Dec 07, 2020

Copy link to clipboard

Copied

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

 

Thanks

 

Views

73

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 07, 2020 Dec 07, 2020

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines