Question

What the html looks like

My problem is at a large view the .hover looks fine, but when the screen is small the .hover stops being aligned how I'd like it.

How can I make the .hover look visibly better at smaller views?

Answer 1

You might want to check at which breakpoint your hover stops being the way you want it. You can toggle a :hover in your inspector to see at which width the hover div is not in the desired position anymore.

After you know at what width the div is misplaced, you could add media queries. In that query where you say (max-width: 1000px){} you could change the margin of the hover div.

Answer 2

I think what you could do is place the .hover element into the element that triggers it to show. The .hover element then needs to be positioned absolutely inside of an element that is not position:static;

The benefit of having the hover content inside of a container together with the label means that they move around together when the page gets resized.

You can change where the .hover appears based on the media query.

HTML:

<div class="container">
  <div class="label">Label</div>
  <div class="hover-content">This is the hover</div>
</div>

CSS:

.container {
  position: absolute;
  top: 100px;
  left: 300px;
  border: 1px solid #000;
}

.hover-content {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 20px;
  display: none;
}

.label {
  padding: 10px;
}

.container:hover .hover-content {
  display: block;
  width: 200px;
  background-color: #000;
  color: #fff;
  padding: 10px;
}

@media (max-width: 600px) {
  .hover-content {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 20px;
  }
}

http://codepen.io/anon/pen/XjobdN

.hover stay in same spot while img and text are responsive

2 个答案: