My goal is to replicate the layout shown in this screenshot view screenshot here
I want the layout to be responsive, with DIV B moving below DIV A when the screen is resized.
DIV B is positioned absolutely to cover content and DIV C.
Both DIV C and DIV A need to span the full width of the screen.
I've managed to achieve the desired layout on desktop, but I'm struggling to make it responsive. Any assistance would be greatly appreciated.
To view the demonstration in action, click on this link: https://jsfiddle.net/DeeptiC/83ox7yLf/4/
Adjust the screen size to witness the responsiveness of the design.
.div-a {
width: 100%;
text-align: center;
padding: 20px;
background: green;
}
.div-bwrapper {
max-width: 1170px;
position: relative;
z-index: 1;
}
.div-b {
width: 200px;
height: 350px;
background: blue;
position: absolute;
top: -60px;
right: 0px;
}
.div-c {
width: 100%;
text-align: center;
padding: 20px;
background: Yellow;
}
.inner-wrap {
max-width: 1170px;
}
@media (max-width: 768px) {
.div-bwrapper {
width: 100%
}
.div-b {
width: 100%;
text-align: center;
padding: 20px;
height: auto;
position: relative;
top: 0px;
right: 0px;
}
}<div class="div-a">
<div class="inner-wrap">
DIV A
</div>
</div>
<div class="div-bwrapper">
<div class="div-b">
<div class="inner-wrap">
DIV B
</div>
</div>
</div>
<div class="div-c">
<div class="inner-wrap">
DIV C
</div>
</div>It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...
I have created a table using div elements that contain images as cell data. When an image is missing, I would like to center the remaining images in the row like this: With all images present: xxxxx xxxxx Missing images (2 in the second row): xxxxx xx ...
Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...
Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...
A unique feature of my webpage is that with just a simple click of a button, users have the ability to dynamically add an endless number of forms. Each form contains fields for user input and also includes a convenient delete button. var form = " Name ...
Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...
Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the availabl ...
Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...
Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...
Is there a way to modify the product names on all product pages, switching them from h2 to h1? I am seeking a solution to change the product names to h1 using custom code. <h2 itemprop="name" class="product_title likeh2">Aspen Ágykeret Bársony S ...
It's fascinating how much effort is required to ensure web applications work seamlessly across all browsers. Despite global standards like those set by W3C, the development and testing process can be quite laborious. I'm curious why all browsers ...
Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...
Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...
When using a website, I apply :hover for web and :focus for touch devices on a link. However, on Android devices, when I touch the link, it triggers the :focus and then automatically opens the link. My goal is for it to trigger the :focus and only open th ...
I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...
My dilemma involves managing two tables: In the scenario, Table 1 remains fixed in place serving as a header that is always visible. Meanwhile, Table 2 acts as the data table. I am not a fan of fixed widths for my tables; I prefer them to dynamically adj ...
Recently, I implemented a trigger function in order to enable another function by triggering the text box. Unfortunately, I am experiencing difficulties as it does not seem to be working properly on Google Chrome. Any assistance you can provide would be ...
Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. An ...
I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...
Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdo ...