Highlighted

Dreamweaver cc Breakpoints

New Here ,
Sep 19, 2019

Copy link to clipboard

Copied

How to hide some content in other breakpoints and show some other content on Dreamweaver cc Breakpoints...

And thank you...

Views

987

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

Dreamweaver cc Breakpoints

New Here ,
Sep 19, 2019

Copy link to clipboard

Copied

How to hide some content in other breakpoints and show some other content on Dreamweaver cc Breakpoints...

And thank you...

Views

988

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
Sep 19, 2019 0
Adobe Community Professional ,
Sep 19, 2019

Copy link to clipboard

Copied

What you want are CSS Media Queries. 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Media Queries</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
#mobile {display:block; color:darkgreen}
#desktop {display:none; color:navy}

/* Special Rules for Tablets & Desktops */
@media only screen and (min-width: 768px) {
#mobile {display:none}
#desktop {display:block}
}
</style>
</head>
<body>
<div id="mobile">
<h3>Mobile Content</h3>
<p>This will load in all devices.  But only mobile devices under 768px will see it. </p></div>

<div id="desktop">
<h3>Desktop Content</h3>
<p>This will load in all devices.  But only devices over 768px will see it. </p></div>

</body>
</html>

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Sep 19, 2019 0
LEGEND ,
Sep 19, 2019

Copy link to clipboard

Copied

Depends on how many changes you need to make for specific devices. If its a case of just hiding/showing a few lines of code then you can use media queries. If on the other hand the content will change vastly then I would be more inclined to use javascript to load only the content you want to show at specific viewport widths, rather than loading all the content and showing/hiding one or the other with media queries.


Media queries can be used and are perhaps the simplest approach for those with less coding knowledge but they should really be reserved for just changing the appearance of the content at specific viewport widths in instances where more complex changes are not required.


Below is a javascript approach which only loads what contemt is required rather than showing/hiding parts.

 

 

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Alternative Content</title>
</head>
<body>
<div class="content">
<h2>Viewport is MORE that 768px</h2>
</div>
<script>
const content = document.querySelector('.content');

window.onresize = function(event) {
altContent();
};

function altContent() {
var winWidth = window.innerWidth;
if(winWidth > 768) {
content.innerHTML = `
<h2>Viewport is MORE that 768px</h2>
`
}
else if(winWidth < 768) {
content.innerHTML = `
<h2>Viewport is LESS that 768px</h2>
`
}
}
altContent();
</script>
</body>
</html>

 

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
Reply
Loading...
Sep 19, 2019 1
LEGEND ,
Sep 19, 2019

Copy link to clipboard

Copied

Instead of hiding content, (which will be downloaded anyway) why not use the html5 detail/summary element?

 

see - Browser support for detail/summary

and - Brief overview

 

It will be supported in MS Edge in the October update.

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
Reply
Loading...
Sep 19, 2019 1
LEGEND ,
Sep 19, 2019

Copy link to clipboard

Copied

I'll look into it. Things move so fast these days I can't keep up!

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
Reply
Loading...
Sep 19, 2019 0
LEGEND ,
Sep 19, 2019

Copy link to clipboard

Copied

hummm.... I can't see how that changes the content at different viewport widths - it just appears to shows/hide the content? - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_summary

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
Reply
Loading...
Sep 19, 2019 0
LEGEND ,
Sep 19, 2019

Copy link to clipboard

Copied

It's not ment to change the content. Search engines, (google) have said that ALL content must be viewable on every device, otherwise they will 'penalise' the site ratings. It goes back to the question of 'how do you allow all content to be viewable'? js and media-queries hiding or showing specific device content, leaves that device user with the full content, (if requiered') having to use a device, (mobile/desktop) that supports the content they wish to see. Yes, you could do it using ajax, but is that really an easy solution?

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
Reply
Loading...
Sep 19, 2019 0
LEGEND ,
Sep 20, 2019

Copy link to clipboard

Copied

ALL content purely means whatever content is applicable to the page/device, I assume. Here we are not addressing just showing and hiding content but changing content at different viewport widths. What does ALL content 'viewable' even mean. In the case of a tab, accordion or tiered menu then you would'nt want ALL content to be 'viewable'. So this suggest it must be 'viewable' to the search robot and not the human eye until an event is evoked, whether that be a media query or javascript or some other workflow. Don't forget 10 years ago Google search bot could not crawl javascript files to get to the content, now it can, so any html content is 'viewable' the way I see things.

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
Reply
Loading...
Sep 20, 2019 0
Adobe Community Professional ,
Sep 19, 2019

Copy link to clipboard

Copied

Thank you for this and to think that the article is dated nearly a decade ago

Ben

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
Reply
Loading...
Sep 19, 2019 0
LEGEND ,
Sep 20, 2019

Copy link to clipboard

Copied

By ALL content, google means that the content available should be viewable/readable on any device used. If it is cut-down or truncated in any way, without some method being provided to view/read the full content, then it fails the criteria.

 

These days, there is no excuse not to allow a user of a smartphone, to view/read all content that is available, without having to use some other means to do so. One of the reasons for this policy, is that many users may now only use or have one device. e.g. a smartpone user may no longer have a laptop or desktop to use. Which would make it impossible for them to view/read the full content if a laptop/desktop browser was the only way to do so.

 

I think, (personal opinion here) that with the rise in the use of mobile devices and smart tv's, laptops/desktops will become a 'work' or 'learning' requirement only for many. The days of someone having multiple ways of viewing/reading web site content, are declining rapidly.

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
Reply
Loading...
Sep 20, 2019 0
osgood_ LATEST
LEGEND ,
Sep 20, 2019

Copy link to clipboard

Copied

I can't agree with that. It makes no sense at all. Are you saying that if a desk-top website contains a heavy load slider, which may contain content, significant information, then Google expects that to be delivered in exactly the same format to a mobile device?

 

The very reason why smart developers should determined what content to deliver to a smartphone/tablet is to make it a more user-friendly experience, to cut down on load time, save band width, taking the amount of 'real estate' one has to work with into consideration, etc. I really have zero idea what ALL content viewable means, apart from that which is determined by a developer to be delivered to a particular device. No one is hiding content, just being sensible about the amount of information being pushed to less efficient devices.

 

Take what Google says with a pinch of salt is my advice. I really don't think they know themselves much of the time as they will say one thing and do exactly the opposite, as has been proven in the past. Developers have always lived with Google scare mongering for years.

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
Reply
Loading...
Sep 20, 2019 0