logo
down
shadow

Responsive SVG background / tailwindcss


Responsive SVG background / tailwindcss

Content Index :

Responsive SVG background / tailwindcss
Tag : css , By : Matt Watson
Date : November 27 2020, 04:01 AM

hop of those help? You can achieve this with the w-full class on the parent block and the max-width: 100%; CSS property on your parallelogram class. See example below :
.parallelogram {
  max-width: 100%;
  width: 20rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.66 97.59'><title>Asset 1</title><g id='Layer_2' data-name='Layer 2'><g id='Ebene_1_Kopie' data-name='Ebene 1 Kopie'><polygon points='0 0 0 97.59 281.83 97.59 311.66 0 0 0'/></g></g></svg>");
  background-size: 100% 8rem;
}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto bg-white pt-12">
  <div class="flex">
    <div class="w-1/4 bg-white h-12">Lorem ipsum dolor sit amet</div>
    <div class="w-3/4 bg-white h-full">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      <p class="pb-12"></p>
      <p class="pb-12"></p>
    </div>
</div>
<div class="flex absolute h-32 w-full" style="margin-top: -4rem">
    <div class="flex text-white h-32 uppercase parallelogram">
        <div class="self-center italic text-2xl font-bold ml-20">Hey <br/>What's up?</div>
    </div>
</div>
  <div class="flex bg-red  pt-12"></div>
<div class="flex bg-red text-white pt-12">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Actual CSS Responsive background not being responsive (?)


Tag : html , By : demize95
Date : March 29 2020, 07:55 AM
Hope this helps It could be an issue with auto fixing CSS in some browsers. I noticed that your max-width property doesn't end with a semi-colon. Some browsers will not show anything after due to running into a syntax error.

Five images on the same row with responsive background (responsive row)


Tag : css , By : Francis
Date : March 29 2020, 07:55 AM
help you fix your problem I tried to create a responsive row that contain five inline images on desktop, two columns on the tablet and on column on smartphone.
.background {
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}

.layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}

.div-diviso {
    width: 17%;
    padding: 10px;
    display: inline-block;
}
.div-diviso img {
  width: 100%;
}


@media (min-width: 768px) and (max-width: 980px) {
 .layer {
    padding: 0px 0px 900px 0px;
    text-align: center;
}
.div-diviso {
    width: 47%;
    padding: 10px;
}
}

@media (max-width: 767px) {
 .layer {
    padding: 0px 0px 1500px 0px;
    text-align: center;
}
.div-diviso {
    width: 98%;
    padding: 5px;
}
}
<div class="background">
 <div class="layer">
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
  </div>
 </div>
</div>

How to configure PurgeCSS for vue-cli-3 projects with TailwindCSS? (including responsive classes)


Tag : development , By : ChrisMe
Date : March 29 2020, 07:55 AM
To fix the issue you can do I'm trying to deploy a vue-cli-3 project. I used TailwindCSS and created a vue.config.js file and it's working, but responsive classes are not being included. I searched about a regex, using a extractor in a webpack.config.js file but it didn't work. What should I do to have this working? , Update your configurations as following:
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

module.exports = {
  configureWebpack: {
    // Merged into the final Webpack config
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, './src/index.html'),
          path.join(__dirname, './src/**/*.vue'),
          path.join(__dirname, './src/**/*.js')
        ]),
        extractors: [
          {
            extractor: class TailwindExtractor {
              static extract(content) {
                return content.match(/[A-z0-9-_:\/]+/g) || [];
              }
            },
            extensions: ['html', 'vue', 'js'],
          },
        ],
      })
    ]
  }
}

TailwindCSS responsive break points not working in Vue


Tag : css , By : koder
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
module.exports = {
  plugins: [
    require('postcss-preset-env')({ stage: 0 }),
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')
  ]
}

background image with text overlay and background color responsive even to 4k screens


Tag : html , By : Bado
Date : March 29 2020, 07:55 AM
I hope this helps . There are multiple ways to achieve this. I would probably go for a solution like this:
Since you want the background color to have the same height as the background image element, the element with the background color needs to get its height from the background image element. That means, the background image element should be inside the element with the background color. The background image element is a 100% wide, but has a max-width. That way to image never becomes to big and shrinks on smaller screens. You need to use the padding-bottom trick to set the height of the background image element. You could avoid that by using an image element, but that's a question of semantics.
Related Posts Related QUESTIONS :
  • How to vertically center text in viewport that's wrapping around floating elements
  • How to create a class name with current users roles?
  • bootstrap non-stacking column number change as per screen size
  • Replacing all ID to Class with certain name using regEx in Sublime Text
  • How to make unordered lists responsive with flexbox?
  • Why does mobile site scroll left to lots of white space?
  • Grid with gradient
  • How to move text to the top edge of its parent div
  • How do I get only horizontal scrollbar if content margin overflows card?
  • How can I implement this using flexbox?
  • Using Scss variables with multiple styles?
  • Calculating column widths with css's calc + sass
  • Add Color Scheme JSON list to Scss file in Angular 8 Environment
  • CSS: placing absolute positioned element so that it touches its parent from outside
  • How to insert a background image over full page width with a Bootstrap grid?
  • How to make volume shadow css
  • How can I equalize the heights of text input fields?
  • Table cell doesn't obey vertical-align CSS declaration when it contains a floated element
  • CSS - How to prevent the browser from showing scrollbars when a div goes outside of the window?
  • How do I make the footer stretch vertically downward align to footer
  • Margically appearing margin in footer. Could use some fresh eyes on this
  • Overlapping 2 Flash objects and controlling z-index
  • element "iframe" undefined - Errors found while checking this document as XHTML 1.0 Strict!
  • Losing information when using BeautifulSoup
  • How to fit a two View components inside a View component with borderRadius?
  • Background - single diagonal stripe
  • Styling arrow in Select Box
  • How to make css where arrows overlap with eachother?
  • Pure CSS interactive human body
  • Font awesome background color is overflown
  • Transitioning opacity from 0 to .9 works with toggling visibility from hidden to visible, but not the other way around
  • Understanding relative position in css
  • How to hide a rectangle where horizontal and vertical scroll bars converge?
  • Where does filter:invert(1) go in shorthand background image css
  • How to evenly add borders around table?
  • How do I get this element in css
  • How to refactor common css rules in media queries?
  • Focus outline not displayed on a div with mask-image CSS rule in Firefox
  • Removing a redundant parent class in LESS?
  • Override CSS of component selector style from ng module
  • How do I move (center) an svg icon?
  • Styling a chamfer / scooped rectangle with a border
  • css animation to happen when on scroll, not when pages loads
  • How to make my flexbox elements divide the total height of the container?
  • CSS Only Pie Chart - How to add spacing/padding between slices?
  • Not able to style nested animations with keyframes with styled-components
  • How to inspect pseudo elements using Internet Explorer 11 developer tools
  • How to fit innerHtml into a p tag
  • How can i make border for active class nav-item in bootstrap 4?
  • Mixing Multiple conditions in a Single NgStyle Tag?
  • I need an element to be a child of other without inheriting certains properties
  • React - JSS have element fade in when rendered
  • Chrome's hidden CSS scroll-snap threshold and how to change it
  • Why can't I see my linear gradient over my background image?
  • Trying to hide a div using CSS
  • How to import css to only one component?
  • Best practices for styling an element that can be positioned anywhere in a page
  • should i use media queries for responsive design with react?
  • Color words ending with a digit?
  • Long Text inside Table Cell Overflow
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com