Stack Overflow
Stack Overflow

Questions tagged [pure-css]

It is a CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components.

It is a CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. Pure is responsive out of the box, so elements look great on all screen sizes. By using Grids, Menus, and more, it's easy to create beautiful responsive layouts for all screen sizes. Pure has minimal styles and encourages you to write your application styles on top of it.

62 questions
0
votes
2 answers

How to put logo image centered above div using pure css or boostrap?

I want to place logo exactly linked linked below image (centered above div). How it can be this done using css? This template it is designed using tabler.io.
…
kumari shwetha
  • 61
  • 2
  • 12
0
votes
1 answer

Card Deck Carousel with Arrow Control

I want to create a Card Carousel with Pure CSS https://www.codeply.com/go/WEbiqQvGhy Is there any way to do it....
oneclick
  • 91
  • 2
  • 9
0
votes
1 answer

Progress Bar Implementation with pure CSS, problem with hover

I was following 100days of CSS Challenges. Got stuck on 62th day. Trying to implement a progress bar with pure css. When hovering on cards I want progress bars to have larger width. Below hover does not work and I dont know why. Any tips on how to…
Erenn
  • 625
  • 6
  • 18
0
votes
2 answers

How to make an alternating responsive grid?

I have a 2-column grid as follows: some text, followed by an image related to that text. On the other row the order is flipped: | Text 1 | Image for Text 1 | | Image for Text 2 | Text 2 | | Text 3 | Image for Text 3…
Motiejus Jakštys
  • 2,769
  • 2
  • 25
  • 30
0
votes
1 answer

how to override hsl lightness with pure css

I have a nav wrapped by a header
With these styles header { background-color: hsl(180, 90%, 35%); } nav { background-color: hsl(180,80%,25%); } The nav color is the header color but darker I'd like to…
sankiago
  • 79
  • 9
0
votes
0 answers

Tree view structure CSS node position issue

CSS:- body { font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif; } /* It's supposed to look like a tree diagram */ .tree, .tree ul, .tree li { list-style: none; margin: 0; padding: 0; position:…
SFDC LWC
  • 1
  • 1
0
votes
4 answers

Change column layout on mobile

I have a nav menu that consists of 3 columns each 33% wide. On mobile I want each column to be 100% wide AND rearrange the columns so that the middle column sits above all other columns. Its much easier to see what I am trying to achieve by viewing…
sazr
  • 24,984
  • 66
  • 194
  • 362
0
votes
0 answers

Pure-CSS - Hide text completely if it doesn't fit in div

In my example there is a diagram, which has a horizontal bar that changes its width. The legend of that bar is shown inside but should only be visible as long as there is enough space to display the string completely. I tried to adjust the parent…
DerLukas
  • 1
  • 1
0
votes
1 answer

Bootstrap navbar + purecss menu misalignment

I have a bootstrap site where I'm using purecss for a dropdown menu and I wrapped it in bootstrap navbar to make it a sticky navbar. When hovering the dropdown, there is a misalignment. How to correct it? .navbar { position: fixed; left:…
xendi
  • 2,332
  • 5
  • 40
  • 64
0
votes
1 answer

Creating CSS only sequential fade-in DIV using loop

Following code is using jQuery. Is it possible to create a CSS only version using loop. I have seen examples of showing DIVs but each DIVs were separately coded with time delay. Such codes will require updating CSS if I add additional DIVs. Instead…
Shuruj Mia
  • 1
  • 1
0
votes
2 answers

How can I hide a cell on a specific breakpoint?

I have the following base layout, which I now would like to transform into a responsive grid using pure css.
…
Matthias Güntert
  • 4,013
  • 6
  • 41
  • 89
0
votes
2 answers

Responsive design & grids: Where should I put the navbar to?

I am building a small blog based on metalsmith and the PureCSS framework, which has a simple three-row-layout like so:
Navbar
Content
…
Matthias Güntert
  • 4,013
  • 6
  • 41
  • 89
0
votes
1 answer

Pure css grid problem when changing the chrome screen size to mobile size

I try to use pure css grid system like explained in the documentation but I'm not able to make it work on desktop resolution and mobile like Pixel 2 resolution. Instead of going on 2 lines like this : I got this letter-spacing problem and the div…
jboo
  • 364
  • 6
  • 14
0
votes
1 answer

How to disable the click to advance on a pure css slider

I have mimic-ed a pure css slider with a 3d effect, where clicking does not advance the slider. When I alter it, the click does advance the slider. Any help making it so the click does not advance the slider? Original Codepen …
Michael Lythcott
  • 25
  • 3
0
votes
1 answer

Dynamic HTML Templates with PureCSS

I am building a web app using flask. I found that I am retying the same thing over and over with a minor edit into everyone of my HTML pages so I want to make it into a template. How can I make it a dynamic template? Below is the code that I use for…
Ben
  • 251
  • 1
  • 8
  • 23
1 2
3
4 5