0

I have made a watermark that is aligned to left of the main content in my website. While I am unable to adjust it properly due to some missing CSS attributes. This is the current look of website: enter image description here

But when I try to minimise the screen, or go to mobile mode, this watermark is covering on top of the main content. I wish to have a water mark to the extreme left of screen and when it minimises it should either disappear or not have to be covering the main content.

This is the code that I currently worte:

<div id="background">
    <p id="bg-text">Add watermark here.</p>
</div>
//CSS:
#background{
  position:fixed;
  z-index: 100000;
  background:white;
  top: 400px;
  left: 0px;
}

#bg-text
{
    color:lightgrey;
    font-size:10px;
    transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

Do not know why this is interfering with the main content. It should serve as watermark and disappear when not needed.

2 Answers2

0

To go responsive you'll have to get in touch with media queries. Basically you have to define breakpoints for different screen sizes and also css code behind every breakpoint to tell your website how to behave reaching them.

Responsive Web Design - Media Queries

Media Queries: How to target desktop, tablet, and mobile? (See comments and answers here)

ent3
  • 192
  • 1
  • 7
  • How do I justify my watermark to extreme left? Is my CSS right? Because I do not think so. –  May 11 '21 at 16:00
  • Take a look at this fiddle: https://jsfiddle.net/w8Lxpaqv Maybe it will help you a bit. Basic idea is, to set background with fixed position and place your watermark with an absolute position to the left side. – ent3 May 11 '21 at 17:16
-1

This can be accomplished with Bootstrap breakpoints and display utility classes. Check out this link to learn more: https://getbootstrap.com/docs/4.0/utilities/display/

Try applying these display utility classes to your code. Using d-none will hide the div on mobile. The class d-md-block will then display this div on screen resolutions at and above medium size.

<div id="bg-text" class="d-none d-md-block">
    Add watermark here.
</div>
Andrew
  • 307
  • 7
  • 13