Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries.

One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, including tablets and mobile devices. Additionally, there is a div positioned outside of the grid which displays text information when the cursor hovers over an image.

The issue:

 _ _ _ _ _ _ _ _ _ _ _ _         _ _ _ _ _ _ _ _ _ _
| _ _ _    _ _ _ _ _    |       | _  _ _ _ _ _      |
||info |  | 16 col  |   |       ||in|16 col   |     |
||     |  |  grid   |   |   =>  ||  | grid    |     |
||_ _ _|  | gallery |   |   =>  ||_ |gallery  |     |
|         |         |   |       |   |         |     |
|        |_ _ _ _ _|   |       |   |_ _ _ _ _|     |
|_ _ _ _ _ _ _ _ _ _ _ _|       |_ _ _ _ _ _ _ _ _ _|

However, when resizing the browser window, the gallery content overlays the 'info' div.

I attempted to solve this by changing the position of the info div to relative, but this caused the responsive 16-column container to move below the info div when scaling down - not the desired outcome.

The Question:

Is it possible to have both elements sit next to each other on the page until the tablet media query (approximately 959px wide) kicks in, at which point one can be removed?

I would greatly appreciate any comments, feedback, or suggestions. Thank you.

jqueryhtmlcssresponsive-designposition

Answer №1

Based on my observation, it appears that the following could be a potential reason for the issue:

1. If you have set the info div as relative, ensure to include the z-index property.
2. If you have set the info div as Absolute, make sure to specify the position property such as left/top, etc.

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

Verify the presence of a ::after pseudo-element on a scraped webpage

I am facing a dilemma with a checkbox on my website that is described in the following HTML code: html = <div class="checkbox checkbox-success checkbox-block"> <input type="checkbox" data-false-value="'0'&qu ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Issues with saving data in jQuery thickbox

Currently, I am utilizing jQuery thickbox to display a popup window for adding records when the add link is clicked. The issue arises when the pop-up window appears but fails to add the records to the database. Strangely enough, when attempting to directly ...

jquery

Using Bootstrap to transform date format to mm/dd/yyyy

In my Django web application, I am utilizing Material Kit (Bootstrap) for the front end. My goal is to display the date on the HTML page in the format of mm/dd/yyyy. For example: 06/27/2018 The date in the database table is already stored in the forma ...

jquerydjangodatedjango-bootstrap3

Personalized jQuery mask customization

After experimenting with a masking function that conceals numbers based on a specific pattern, I am now looking to make it more flexible for users. For instance, if a user types 123456789, the field will display as XXX-XX-6789. Currently, the pattern is ...

jquerycss

Guide to making a sidebar navigation menu on the left using Bootstrap

How can I create a left navbar using Bootstrap? I managed to do it. <nav class="btn-group-vertical float-left navbar"> <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button> ...

htmlcssangularbootstrap-4

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...

htmlcss

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

css

I am facing an issue where the CSS style sheet is not connecting to my HTML file

I'm facing an issue with linking my CSS style sheet to my HTML file using the following code: <link ref="stylesheet" href="../landing/css/stylesheet.css" type="text/css"/> Even though I have checked the directory l ...

htmlcss

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

htmlcss

Exploring the World of Audio Playback with R Shiny

For this question, I am incorporating the following libraries: library("shiny") library("tuneR") library("markdown") Although, it seems that only shiny is relevant in this context. According to the Shiny tag glossary, I should be able to utilize tags$a ...

htmlrshinyhtml5-audio

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

htmlangulartypescriptautocomplete

I am looking to incorporate automatic scrolling functionality into my RSS Feed

I'm in the process of developing an RSS feed for my website. My expertise in JS/jQuery is limited, so any assistance would be greatly appreciated. After utilizing Google's Feed API and creating my own RSS Reader Widget, I realized that it lacked ...

javascriptjqueryhtmlrss

Showcasing a checkbox with the chosen item marked as selected

My goal is to allow users to select hobbies from a checklist provided. The chosen hobbies should then be added to the user table. I want the checkboxes to display the user's current hobbies - checked if selected, unchecked if not. Users should be able ...

pythonhtmlgoogle-app-engine

Developing dynamic 3D cubes

In my latest project, I am attempting to construct a unique structure composed of 3D cubes arranged in a stacked formation. Each of the individual cubes within this structure is designed to be interactive for users. When a user hovers over a cube, it trigg ...

javascriptjquerycanvas3d

Issue submitting form with tinymce textarea multiple times via ajax

Struggling with submitting a form using ajax with tinymce as the textarea editor. The issue arises when trying to submit the form multiple times, as it only works on the initial attempt. This is the form structure <form action="{{action('QuizCont ...

phpjqueryajaxlaraveltinymce

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

Show only percentages in jqplot graphical representation

Currently, I am in the process of incorporating the jqplot jQuery chart plugin into my Rails application. The example provided by jqplot includes this data: var data = [ ['Heavy Industry', 12],['Retail', 9], ['Light Industry&a ...

jqueryjqplot

Apply a background image to the input[type='submit'] along with text

<input name="submit" type="submit" value="Search" class="button search"> Is it feasible to incorporate a CSS gradient using background-image: and still display the text within the value attribute? Whenever I introduce a background-image, it conceal ...

htmlformscss

Positioning elements in a header using CSS techniques

I am currently working on designing a navigation menu header that includes a logo, along with some buttons aligned to the left side of the logo. However, I am facing an issue where these buttons appear at the bottom of the logo instead of aligning to the t ...

cssreactjsmaterial-uijss