22,560
questions
0
votes
2
answers
37
views
Div doesn't occupy space in mobile
I have a div with three elements: input field, timer, reset button in desktop view all three elements are of the same height but when I view it on an iphone 12 mini specifically the timer and reset ...
1
vote
1
answer
47
views
Div design wont center [duplicate]
I try to center this code, but I can't find what in the code makes it placed on the left instead of centered.
I have changed the flex-direction to column instead of row as I had originally. Which did ...
-1
votes
1
answer
51
views
flex container not working inside tab content page
I am creating a site with tabs using style element of tab and tab content.
In one of the tabs content, i want to use a flex container to control display of various elements - tables, graphs and text.
...
0
votes
1
answer
25
views
Only bottom row of Flexbox Gallery in clickable
I'm trying to create a Flexbox gallery that is responsive to browser width (ie. wraps and auto creates rows) where you can click on the image to open up a full size version of the image on it's own ...
0
votes
2
answers
17
views
flexbox column Resize image according to text length
Given a flexible box column, how can I resize image as text length increases to fit.
.container {
width: 400px;
height: 300px;
border: 3px solid green;
padding: 4px;
display: flex;
...
-3
votes
1
answer
56
views
how to place text underneath two div elements within the same div container [closed]
I am trying to make my website look like the design in the first image below but I also want to add another text beneath the first image and text as shown in the second image beneath the first image
...
0
votes
1
answer
31
views
When using Flex Wrap, how can the height be the same as the first line through min height?
Currently, I use Flex wrap to give a space when moving to the next line. However, if the height of first becomes longer, the height of the first flex wrap line does not become longer.
<div class=&...
0
votes
1
answer
29
views
The justify-content-center class from bootstrap v4.5 is not working, even though my html matches the html in the bootstrap docs exactly
I'm trying to create a responsive contact us section for a website I'm designing and coding for a local business, but the justify-content-center class from bootstrap v4.5 is not centering the icons in ...
1
vote
3
answers
85
views
Flexbox items in three columns
I have a flexbox container that will contain 5 or 6 items. flex-direction of the container will be set to row. What I want is to distribute those items like this: The first item should be the first ...
1
vote
1
answer
38
views
How can I fix nested gird layout?
In the example below you can see the issue. I have tried changing the grid-tample-colums property of the grid-container (ol) to grid-template-columns: min-content 1fr 0;
. But I am stuck.
ol {
...
0
votes
1
answer
61
views
Nested Flexbox for navbar
I've been working on making a dropdown navbar using react, to resemble the image below -
My code -
NavBar.jsx
import React, { useState } from 'react'
import './NavBar.css'
const NavBar = () => {
...
0
votes
0
answers
23
views
Primevue dynamic datatable in flexible dialog
I have an application showing lots of data in tables, most of which have dynamic column configurations retrieved from the server. Since there a potentially a lot of rows, I'd also like to use the ...
0
votes
0
answers
30
views
Vuetify flex wrap order
I'm working with a flex container that has four items. The third item has a variable width based on dynamic content. When the container runs out of space, I want the third item to wrap to a new line, ...
0
votes
1
answer
24
views
Google App Engine Flexible environment for Python with Flask and Gunicorn
I used to have a setup for my google app engine python project with the following app.yaml:
runtime: python
env: flex
entrypoint: gunicorn -b :$PORT main:app
runtime_config:
python_version: 3
...
-2
votes
0
answers
35
views
what happens when the flex item width depends on the width of flex-container which is not specified? [closed]
The child div width is not covering the whole width of parent.
According to me since there is no constraints of width the default behaviour of flex-item is to be the size of the content inside of it.
...
0
votes
1
answer
56
views
How to place a div next to a centered div in a flexbox?
I want to have a div in the center of the window and place another one right next to it without moving it.
Right now I have:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: ...
0
votes
0
answers
60
views
CSS Wrapping Issue: Prevent Words from Expanding to Fill Row on Wrap
I'm struggling with a Flexbox layout issue where I want a specific wrapping behavior for words inside a <span> classed as keep-together. The requirement is for the words to stay together on the ...
0
votes
1
answer
71
views
CSS Grid + Flex: info-container won't overflow on img
with grid and flex properties i'm trying to let my info-box overflow a bit over my image instead of having it right below. Is there any suggestions to make it possible?
So far I tried the simple ...
0
votes
3
answers
61
views
How can I make all images inside a div flex container match the size of the smallest image in the container?
I have a flex container with 4 images, 3 of which are the same size (200x134). However, there is one image that is larger (401x267). I want the larger image to contain itself and adjust its size to ...
0
votes
1
answer
24
views
How to create a scrollable HTML table that takes up the remaining height of its container without JS
I'm trying to create a scrollable table in an HTML layout. The table should take up the remaining height of the container, and only the table should scroll vertically if the content exceeds the ...
-1
votes
1
answer
28
views
Wrap when equal-width containers get too small to contain their content
I have a row flexbox with these requirements:
The flexbox has two child flex items
The flex items ALWAYS have the same width
As soon as the container becomes small enough that ANY of the flex items ...
0
votes
0
answers
14
views
Vertical align and center of container using flex-box [duplicate]
How to fit only one item in the center of the container using flex-box?
I can use the justify-content, but it works for all items.
I need to apply justify-content only in one item, probably using flex-...
0
votes
0
answers
30
views
Flex Container cutting of item, which increases height on focus using outline
I am using following scss:
to have a row of buttons.
Working good. However in case of focus the single buttons size increases by a few pixels and it looks like parent flex container .form-buttons does ...
0
votes
0
answers
16
views
Column headers with equal height based on dynamic content [duplicate]
enter image description here
I need a layout where there are 3 columns with each containing a header section and content section. The headers of all 3 column has to be equal based on dynamic content ...
0
votes
0
answers
34
views
How To Have Div Scroll When Out-Of-Bounds, While Using Flex?
I have a main div, which is a child and is centered by a content div. This content div is siblings with a header div and footer div, which are children of a wrapper div. The content div is made to ...
0
votes
2
answers
60
views
Centering a loading spinner
I want to ensure my loading spinner is always centered when used, in a table, a button, ...
.th-loader {
.progress {
top: calc(50% - (var(--loading-indicator-border)/2));
left: calc(50% -...
-1
votes
0
answers
28
views
flex-items have unqeal width even thought flex: 1 is set [duplicate]
all i have flex-cntaienr with two items. But even though I use flex: 1 for them and besides the fact box-sizing is set to border-box, they do have the same width. This is caused by the second element ...
1
vote
2
answers
61
views
How can I reverse all the elements of a flexbox in CSS?
I'm trying to sort elements of a flexbox from the last to the first.
I tried using flex-direction: row-reverse; but it only reverses the lines, not the whole container.
The result:
It sorts like 3-2-...
0
votes
2
answers
57
views
Proper alignment of images and text within individual containers
I am trying to align an image closer to its right container border while also trying to align a text closer to the left of its own container border but still give spacing between the two elements ...
0
votes
0
answers
22
views
Make header sections in a div the same height [duplicate]
I have 3 columns where i want the divs to be the same height, i also would like to have the header sections inside those divs to be the same height no matter the content inside of it. I am not sure if ...
1
vote
1
answer
32
views
Styling dataItems in kendoTreeViewNodeTemplate (Angular)
So for my Angular application I created a menu-builder using the Kendo-TreeView component.
I would like to have my action buttons for the nodes to be nicely aligned on the right side as you can see in ...
0
votes
1
answer
52
views
Align items equally using CSS with different parents
I want align items with equal spacing and with different parents and without adding any width to those items. I tried below code but not working. Please help me to on this.
<div class="...
0
votes
1
answer
42
views
`<img>`s in flexbox loses proportions in Safari
I have a problem with <img>s inside flexbox in Safari browser (only). I want to create a horizontal list of same height but various width images. I can't set exact height for each image as it ...
-2
votes
3
answers
54
views
differences in rendering of a flex-grid
can anyone please explain, why is the first example faster when scrolling down
than the second one? Seems like the 2nd example is re-rendering the rows as I scroll down.
It's only noticeable when you ...
0
votes
2
answers
45
views
vertical scrollbar showing up even when total height is 100%
I have simple HTML/CSS code, that have 3 divs , Header, content and footer.Header and footer are of fixed height(170px) and content is expected to take remaining vertical space. all threes are placed ...
0
votes
1
answer
56
views
How to make side-by-side divs in flex container wrap their contents before wrapping themselves
I have a flex container with two items: an image, and a div containing text and a search box. If the window is sufficiently wide I want the text div to appear to the right of the image, wrapping the ...
0
votes
2
answers
82
views
How can I fit content in visible page while using aspect-ratio?
I have a component on my page (named grid in the example).
I’d like this component to achieve the following constraints:
maintain 1:1 aspect ratio
be as big as possible
stay within the bounds of the ...
-2
votes
1
answer
78
views
How to vertically align text and image with the bottom elements in CSS?
I am working on a layout where I have some text on the left side and an image on the right side. Below them, I have three smaller images. I want to align the left text and the right image so that they ...
-1
votes
0
answers
22
views
How to apply transitions to changes in position of flex-wrap contents?
I have a webpage displaying a 12 month calendar for users to select various dates. The calendar always displays 12 months. Using a slider I allow the user to dynamically change the size of the months ...
0
votes
1
answer
46
views
space-evenly not working in my flexbox menu
I'm trying to get my menu to space out evenly. It seems to be stuck in the middle and not expanding into free space on either side.
<!DOCTYPE html>
<html lang="en">
<head&...
0
votes
0
answers
15
views
How to align columns across rows in flex (React Native)
How can I use React Native flex to create a table, where column are stretched to fit the widest content?
<View style={styles.container}>
<View style={styles.row}>
<View style={...
0
votes
0
answers
50
views
Woocommerce: show 2 columns on mobile for related products
I'm recently using the Blockify Theme for Wordpress and am using Woocommerce.
I would like to show 2 columns for the related products on mobile.
Here's an example URL: https://superveggie.es/producto/...
1
vote
1
answer
63
views
My flex-boxes are not aligning properly / overlapping
I'm working on a section of a basic website that requires an image and text on the left and other smaller boxes on the right side.
The left side is supposed to take 60% of the available screen and the ...
1
vote
1
answer
35
views
How can I make a responsive CSS layout with cards, keeping the top and bottom sections of the cards the same height as the tallest in the row
I have a layout where I want to display multiple "cards." Each card will consist of 3 sections laid out vertically. The top section will contain text that will be different lengths for ...
0
votes
0
answers
31
views
Is there a way to align a link containing an image and text so that the text is vertically aligned with the middle of the image? [duplicate]
I am working on a portfolio site and encountered a small problem. I am attempting to create links that have a website logo and some text next to it for my various projects. Since the images are a bit ...
-1
votes
1
answer
46
views
3rd column below the 2nd and move to below the 1st
I'm trying to do this :
I try flex but I can't find the solution.
.container {display:flex; flex-wrap: wrap;}
.col1 {width: 50%; background-color: #ccc;}
.col2 {width: 50%; background-color: red;}...
0
votes
1
answer
59
views
4 items per row but with empty space if there is less than 4 items?
I want to know if there is a way to have 4 items per row but not have the rows with <4 items to stretch to fill the space.
.item-container {
display: inline-flex;
flex-wrap: wrap;
flex-...
-2
votes
2
answers
85
views
How can I make a card like this which is responsive in HTML/CSS
I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I've coded this up ...
0
votes
1
answer
81
views
Why does my text in <p> tag go off the screen? (HTML, CSS)
I am new to web development and was playing around with HTML and CSS. I used a <p> tag with a bunch of text in it, and it's not fully visible on the screen. I can barely see half a character on ...
0
votes
2
answers
98
views
How to stretch cards to fill entire div with HTML/CSS?
I've created two cards on a site I am building. I would like them to span the entire div but I cannot get them to span the width without their size being giant. Ideally, I would like to make the cards ...