Skip to main content
Filter by
Sorted by
Tagged with
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 ...
Rohith Nambiar's user avatar
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 ...
GrezZeR's user avatar
  • 11
-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. ...
Arjun Bhandari's user avatar
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 ...
Nicholas van Niel's user avatar
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; ...
dras's user avatar
  • 360
-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 ...
Samuel's user avatar
  • 5
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=&...
user22971224's user avatar
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 ...
Lauren Ward's user avatar
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 ...
Faye D.'s user avatar
  • 732
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 { ...
Adler's user avatar
  • 2,774
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 = () => { ...
Aviral Mehrotra's user avatar
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 ...
Ray's user avatar
  • 31
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, ...
Mads Gadeberg's user avatar
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 ...
Nir's user avatar
  • 61
-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. ...
aman singh's user avatar
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: ...
undefined's user avatar
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 ...
Sotiris's user avatar
  • 87
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 ...
user24633407's user avatar
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 ...
aldodagio's user avatar
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 ...
Beach's user avatar
  • 11
-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 ...
Hyperbo Lee's user avatar
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-...
danilo's user avatar
  • 9,019
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 ...
vhochstein's user avatar
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 ...
Karthik Muckatira's user avatar
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 ...
Cohl's user avatar
  • 19
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% -...
parastoo's user avatar
  • 382
-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 ...
R B's user avatar
  • 1
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-...
Kumkuatte's user avatar
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 ...
Samuel's user avatar
  • 5
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 ...
Travis Michael Heller's user avatar
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 ...
rifx's user avatar
  • 23
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="...
vedankita kumbhar's user avatar
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 ...
norin89's user avatar
  • 482
-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 ...
Alexus's user avatar
  • 1,953
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 ...
shivam prajapati's user avatar
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 ...
Chap's user avatar
  • 3,779
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 ...
Overlord Zurg's user avatar
-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 ...
flash's user avatar
  • 1,551
-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 ...
Matt Penner's user avatar
  • 1,112
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&...
Alan's user avatar
  • 25
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={...
Oliver Hausler's user avatar
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/...
Saskia SEO's user avatar
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 ...
Zack Riquelme's user avatar
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 ...
Elezar's user avatar
  • 1,462
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 ...
Vlad G's user avatar
  • 28
-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;}...
usualuser's user avatar
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-...
Fox L's user avatar
  • 3
-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 ...
braxton's user avatar
  • 32
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 ...
Study Account's user avatar
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 ...
braxton's user avatar
  • 32

1
2 3 4 5
452