Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display becomes problematic on smaller devices due to the lack of responsive design. If my site were responsive, the ad would cover a significant portion of the screen on a device with a width of around 400px, resulting in higher click-through rates. I need to achieve similar results on my non-responsive site to enhance ad performance.

<div id="float_rightad" style="position:fixed; top:15%; right:0;width: 160px; height:600px;  z-index:5000;">
    <div style="position:absolute; left:-5px; margin-top:0px; z-index:15;">
        <a href="Javascript:void(0);" onclick="document.getElementById('float_rightad').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
        </a>
    </div>
    <div>
        <script data-cfasync="false" type="text/javascript" src="//www.sparkadsmedia.com/adscript/120x600_english.js"></script>
    </div>
</div>

Could anyone advise me on how to implement this on my site?

Answer №1

To achieve this, you may need to add additional CSS3 statements within a style block like the one below. It's also recommended to use relative widths (%) for your ads whenever possible:

<style type="text/css">
    @media screen and (orientation: landscape ) and (max-width:400px ) {#float_rightad { ADD YOUR STYLES FOR SMALL SCREENS HERE}}
    @media screen and (orientation: portrait ) and (max-width:400px )  {#float_rightad { ADD YOUR STYLES FOR SMALL SCREENS HERE}}
</style>

If your ad includes an img element, you can set the image width relative to the container div using percentages. Otherwise, consider using the iframe element instead. I hope this information proves helpful. Warm regards,

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

"Combining multiple attributes to target elements while excluding specific classes

My dilemma lies in the following selector that identifies all necessary elements along with an extra element containing the "formValue" class which I aim to omit $("[data-OriginalValue][data-OriginalValue!=''][data-TaskItemID]") ...

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

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 ...

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

Getting data from non-input fields in Flask

Seeking some guidance here - struggling to figure out how to extract values from elements other than input fields using Python with Flask. For instance, I'm working with an HTML form containing the following elements: <form action="/newgame" metho ...

Display HTML element within the <samp> tag using PHP

I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

Get the content from a webpage, find and calculate the total count of div elements with a specific class, and display that number

Greetings everyone, I've run into a bit of a roadblock. My goal is to create a basic script that can count the number of servers currently running on this map by scraping the webpage, calculating the divs with the class ".row ark_srv1", and then displ ...

The CSS counter fails to increment

In this unique example: h3 { font-size: .9em; counter-reset: section; } h4 { font-size: .7em; counter-reset: subsection; } h3:before { counter-increment: section; content: counter(section)" "; } h4:before { counter-increment: subsection 2; ...

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

Utilizing SCSS Interpolation within a mixin invocation

My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...

Maximized - Immersive Full Screen Background - Limited to Half the Size?

Looking to incorporate the Supersized Fullscreen background found at Supersized Interested in having the slider appear on the right half of the site with content on the left half. Want the content to move when scrolled while keeping the background station ...

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...

Turn off the special treatment of the "class" attribute

The Background: When using BeautifulSoup to parse HTML, the attribute class is considered a multi-valued attribute and is treated differently: It's important to remember that a single tag can have multiple values for its "class" attribute. When se ...

What is the best way to conceal a new HTML5 element in Internet Explorer 8?

Here is an example of the code I'm working with: <div id="body-no-aside"> <div id="content"> Some contents </div> <aside id="aside"> Something aside </aside> </div> I have added html5shiv.js to ...

I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

I have created a feature to copy abbreviation definitions when the clipboard icon is clicked. A tooltip displaying 'Copied' should appear after clicking the icon, but for some reason, it's not visible. Here's the code: $(document).re ...

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...