Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post.

Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page.

You can view the live link here.

Here is what I added into the head:

<div id=”LeftFloatAds”><a href="https://www.pensionbee.com" target="_blank"><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></a></div>

And this is what I added into the CSS:

@media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{

left: 0px;

position: fixed;

text-align: center;

top: 200px;

}

}

Just for your information, I followed this guide.

htmlcsswordpress

Answer №1

  1. To start off, rearrange the placement of ... and place it within your main content wrapper.
  2. Next, add the following css code:

If you only want to display this on wider screens, use the following media query:

@media only screen and (min-width: 1400px) {
    #LeftFloatAds {
        position: fixed;
        display: block;
        overflow: hidden;
        left: 0;
        top: 200px;
    }
}

This will ensure that the banner is hidden on screens smaller than 1400 pixels.

@media only screen and (max-width: 1399px) {
    #LeftFloatAds {
        display: none;
    }
}

Answer №2

Remember to use the correct quotation marks when defining div ids.

<div id=”TopBanner”> should actually be <div id="TopBanner">

Also, the media query you provided is setting properties for a screen width that is at least 1400px but less than 500px, which doesn't make sense. The correct syntax would be:

@media only screen and (min-width: 500px) and (max-width: 1400px)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

javascripthtmlcss

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

What is the best way to eliminate tags from a BeautifulSoup-scraped list?

When using beautifulsoup to scrape a page, I am trying to extract the "title" by searching for specific tags: title = [text.find_all('h1', {'class', 'entry-title'}) for text in texts] The resulting output is a list like this: ...

pythonhtmlbeautifulsouptags

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...

jqueryhtmlcss

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

javascriptjqueryhtmlcss

A unique CSS transition effect applied after toggling a class

Greetings everyone I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this ...

jquerycsscss-transitions

Learn how to effectively display checkboxes in an HTML form with Vue configuration

new Vue({ el: '...', data: { checkeditems: [] } }) <div v-for="item in instituteModel" v-if="instituteModel.length > 0"> <input type="checkbox" id="item.id" value="item.inst_name" v-model="checkeditems"/> </div&g ...

javascripthtmlvue.js

Utilizing WordPress Theme Functions to Efficiently Compress and Convert Uploaded Images to WebP Format with Imagick

I have created a function to compress and convert uploaded images to WebP format using Imagick in WordPress. The function also adds the converted images to the media library and deletes the original uploaded files. The function is located in the WordPress ...

phpwordpressimagickimage-conversionimage-comparison

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

javascripthtmlcss

Tips for executing a jQuery function on multiple sets of elements

Currently, I have a list with all items sharing the same class name. There is a jQuery plugin that identifies the tallest element and sets the height of all list items to match the tallest one. My goal is to run this method for each UL group individually. ...

jqueryhtmlpluginsloops

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...

javascripthtml

An image that is in motion at an inappropriate time

My website has run into an issue. Within the navigation bar, there are two unordered lists containing list items and nested ul tags with images in some of the list items. When applying animations, the image moves along with the tabs. Here are visual exampl ...

htmlcss

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

htmlcssimageinternet-explorercross-browser

Changing the upload directory in ACF Pro Extend is a simple process that can help optimize

I'm currently exploring ways to modify and incorporate a new upload path into this plugin. My attempt to comprehend the instructions provided by ACF Extended has left me feeling somewhat perplexed, as it appears incomplete in its explanation. In an ef ...

phpwordpressadvanced-custom-fields

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Tips on Including Static Header and Footer in Multiple HTML Pages

What is the best way to reuse a header and footer on multiple HTML pages without repeating code? I have 5 HTML pages that all need to include the same header and footer elements. How can I efficiently reuse these components across all pages? ...

javascriptjquerycsshtml

Display XML information when a row in the table is selected

I am working with an XML data sheet and utilizing ajax to extract information from it in order to generate specific tabs and construct a table of data. However, I am encountering a challenge when attempting to display details in adjacent divs once a row of ...

jqueryhtmlajax

Delete the initial double line break and then switch the remaining double line breaks to single line breaks

I am facing an issue with some HTML content fetched from an external source. My aim is to specifically target instances of double br tags using jQuery. I want to delete the first occurrence of double br and convert all subsequent occurrences into single br ...

jqueryhtml

How do you vertically span a grid element across 3 rows using Material UI?

This particular scenario may appear to be straightforward, but the official documentation of Material UI lacks a clear example on how to achieve this. Even after attempting to nest the grid elements, I encountered an issue where the grid element on the ri ...

javascripthtmlreactjsmaterial-ui