Skip to main content
A
abdullahm81652557
Participant
September 19, 2019
Question

Dreamweaver cc Breakpoints

  • September 19, 2019
  • 5 replies
  • 1431 views

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

And thank you...

    This topic has been closed for replies.

    5 replies

    O
    osgood_
    Legend
    September 20, 2019

    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.

    pziecina
    pziecina
    Legend
    September 20, 2019

    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.

    pziecina
    pziecina
    Legend
    September 19, 2019

    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.

      O
      osgood_
      Legend
      September 19, 2019
      I'll look into it. Things move so fast these days I can't keep up!
      O
      osgood_
      Legend
      September 19, 2019

      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>

       

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        September 19, 2019

        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— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices