Docs

[Ryanbrown1987]

Hey team.
In my footer about section I created, I added a text box and made a white rectangle background for it. When the browser window is resized (as in zooming out or resizing the browser window) the white background disappears. Is there a way to make this stay visible when resized, or a method of adding the text with white rectangle background I’m not using?

Examples below.

Thanks!
http://www.LostBoyMemoirs.com

[Ryanbrown1987]

Example 2

[Rupok]

Hi there,

You have placed your code under media query :

@media only screen and (min-width: 1024px) and (max-width: 1333px) {
.vc_gitem-zone-mini h4 {
    font-size: 100%;
    margin-top: 10px;
}
.vc_gitem-animate .vc_gitem-zone-b {
    font-size: 16px;
}
.my-full-width-images {
    width: 100%;
}
.my-textbox {
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
}
}

So it will be applied on 1024 – 1333px screens. You should place it out of media query to get for all screen.

Cheers!

[Lely]

Hi Ryan,

Thank you for the screenshot. Upon checking, the following custom CSS that is responsible for that is inside a certain media query:

.my-textbox {
  background-color: #ffffff; /* background color of the text box */
  position: center;
  border: none
  margin: 0 auto;
  padding: 20px;
    width: 100%;
    
  }

It is inside this:

@media only screen and (min-width: 1024px)  and (max-width: 1333px) {
}

That media query means that the code inside will only take effect if the screen size is greater than or equal to 1024px and less than or equal to 1333px. So when you resize the screen, we can’t see the background. If you want that part to be always in use, please move that custom CSS outside the media query which means after this line:
} /* @media's close bracket is important */

Hope this helps.

[Author]

Posts