Div Not Visible in HTML and CSS

div does not show up

Try This:

You were missing content and you did not specify a background-color so your div was not visible, blending in with the default body colour.

<html>
<head>
    <title> Recommend Div </title>
    <style>
    .recommend{
        background-color:#000;
        color:#FFF;
        left:66px;
        border-radius:1em;
        width:600px;
        height:400px;
        top: 140px;
    }
    </style>
</head>
<body>
    <div class="recommend">Hello World</div>
</body>
</html>

Make one div visible and another invisible

Making it invisible with visibility still makes it use up space. Rather try set the display to none to make it invisible, and then set the display to block to make it visible.

How do you create a hidden div that doesn't create a line break or horizontal space?

Use display:none;

<div id="divCheckbox" style="display: none;">

visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document, it doesn't take up any space.

Div tag shape not showing

The syntax you've used for specifying border-width and border-radius is incorrect.

You must instead use this:

.face {
  color: #ffe9d1;
  top: 100px;
  left: 100px;
  border-radius: 50px; /* Notice this */
  border: 100px red solid; /* Notice this */
}

  <div class="container">
    <div class="face"></div>
    <div class="eyeleft"></div>
    <div class="eyeright"></div>
    <div class="smile"></div>
  </div>

div not visible, even after adding display:block

First, it is taking up space because you set the width/height attributes

Second, I removed the !important as they seem to be taking precedence over many things.

.issuuembed{
    margin: 0 auto;
    display:none
}

#issuumobile{
    margin: 0 auto;
    display:block;
}

Third, you need the image to be placed inside the div to show/hide

See Demo

After your comments, I played with the HTML a bit more and changed this

<div id="issuumobile">
    <div data-configid="11690692/8138261" class="issuumobile"></div>
</div>

to this

<div id="issuumobile" data-configid="11690692/8138261" class="issuuembed"></div>

UPDATED DEMO

Change css when element/div not visible on screen

The problem is that isElemVisible() is not being executed. The method has been defined and it is executed the first time that Vue is determining if bClass should be enabled, but subsequently, particularly when scrolling, it is never executed again.

Instead of a simple method that is only executed once, I'd recommend using a boolean data property that you update upon scrolling with the value returned by jquery-visible.

I have put together this CodePen to demonstrate what I mean, but in short:

<div id="myDiv" class="aClass" :class="{'bClass': isElemVisible}">
</div>

And instead of a method use a data property and a scroll event listener:

data() {
  return {
    isElemVisible: true
  }
},

created() {
  window.addEventListener('scroll', event => {
    this.isElemVisible = $('#myDiv').visible(true)
  })
}