I am currently working on making my webpage responsive. I have encountered an issue where my text overflows into another grid cell because there is not enough space. Is there a way to move these cells into a new row so that the text has enough room and all other cells remain fully visible?
Should I insert a new row in my parent-grid to address this problem? What would be the simplest solution to fix this issue without relying too heavily on media queries?
Thank you.
Consider this approach: 'inserting' an additional row beneath the image and text. It seems unnecessary to include the fifth box, which can be easily removed from the code. The responsiveness aspect is assumed to be already incorporated in your CSS elsewhere. Your specific configuration might differ from this sample (grid-container), so sharing some of your code would facilitate finding a more suitable solution.
.grid-container {
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, auto);
background-color: #2196F3;
column-gap: 5px;
row-gap: 5px;
padding: 5px;
font-family: arial, san-serif;
color: #000;
}
.grid-item {
/*--background-color: rgba(255, 255, 255, 0.5); alternative color for all sections--*/
border: 2px solid rgba(0, 0, 0, 0.5);
padding: 20px;
font-size: 1.5em;
text-align: left;
}
.item1 {
grid-column: 1 / span 1;
background-color: lime;
}
.item2 {
grid-column: 2 / span 2;
background-color: yellow;
}
.item3 {
grid-column: 1 / 2;
background-color: blue;
}
.item4 {
grid-column: 2 / 2;
background-color: orange;
}
.item5 {
grid-column: 3 / 3;
background-color: red;
}<div class="grid-container">
<div class="grid-item item1">1 image here</div>
<div class="grid-item item2">2 lots of text here <br>more text <br>more text <br>more text </div>
<div class="grid-item item3">3 link</div>
<div class="grid-item item4">4 link</div>
<div class="grid-item item5">5 link</div>
</div>Below is the HTML code where the div is being cut by the table border when the page is in standards mode. Interestingly, if I remove the <!DOCTYPE html>, then it works fine as expected. The issue of the outside div not behaving properly on the table ...
I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...
Thank you for taking the time to read this :) I am trying to create a layout where articles are displayed one below the other in card style, but I am struggling to find a solution to my problem. I have experimented with z-index, absolute and relative pos ...
My Goal https://i.sstatic.net/JbdXR.gif I aim to bring attention to the <p> element as the user scrolls on the page. Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down. My Attempt window.o ...
Consider the following React Native styles: var styles = StyleSheet.create({ parentView:{ width: 400, height:150 }, containerView:{ flex:1, flexDirection: 'row', alignItems: 'center', justifyContent: &apos ...
Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...
I'm experiencing some difficulties with displaying a dropdown menu. Check out the fiddler link for reference: http://jsfiddle.net/GxrSk/ Below is the simplified HTML code: <nav> <ul id="top-menu"> <li class="parent"> ...
Looking for help with making a Shopify website more responsive. I have a hero video at the top, but it's leaning to the right and leaving a blank space on the left. Can anyone assist me in making it 100% responsive without much coding knowledge? I&apo ...
I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...
Currently, I am working on automating a web service using Selenium and Python. My ultimate goal is to extract the text "test" located below. However, I am facing some challenges in figuring out if this is feasible through Selenium or any Python library. & ...
In my current project, I am looking to have either 7 or 8 columns for the largest screen size using Bootstrap 4 (greater than 1200px). However, for screen sizes smaller than 1200px, the standard 12 columns suffice. Is there a way to modify the default Boo ...
Let's say I have an element and I am interested in finding out its background-position: To achieve this, I use the following code snippet: window.getComputedStyle(element).getPropertyValue('background-position') If the value of background ...
Is it possible to identify the exact point where two elements overlap? Take a look at the code snippet below that demonstrates what I mean: <html> <head> <style> body { height: 100%; margin: 0; padding: 0; ...
I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this? I intended to give each state a different color, but sadly, it didn't wor ...
Picture a typical web application page that utilizes jQuery and Knockout to create modal dialogs for data editing. The process runs smoothly as the page loads, with the JS generating the dialogs when buttons are clicked. However, there is a slight issue wh ...
Recently, I've been diving into the world of web development. I attempted to create three divs in one row using Bootstrap col class, but unfortunately it didn't turn out as expected. Two divs ended up in a row with some blank space, while the thi ...
Is it possible to create a webpage that is only visible on tablet and mobile devices, while redirecting desktop users somewhere else? I want this page to be hidden from desktop users entirely. ...
I am looking to wrap my text fields and other form elements in a label tag: <label for="response">Tell me what you think: <input type="text" id="response" name="response"/></label> This allows me to apply CSS like the following: label ...
Within my anchor tag, there are two elements: a fontawesome Icon and a hidden span that only appears when the anchor is hovered over. The problem arises on my website when the hidden span is displayed inline causing the parent anchor to increase in height. ...
Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...