The @media screen rules are used to create responsive design in CSS so that web pages render the best appearance and layout on different devices. You can define different CSS rules to apply different styles within a specific range of screen sizes.Here is a simple example: /* default style */ Read more…
<div class="box"> <img src="upimg/comm.png"/> </div> <div class="box"> <img src="upimg/comm1.png"/> </div> <div class="box"> <img src="upimg/comm2.png"/> </div> .box{ width: 100%; margin: 20px auto; background: skyblue; position: relative; padding-bottom: 56%; // change this overflow: hidden; } .box>img{ width: 100%; position: absolute; top: 0; left: 0; } Note: padding-bottom attribute: when the value is Read more…
The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will Read more…
Download dependency. yarn add react-markdown yarn add remark-gfm yarn add rehype-raw yarn add react-syntax-highlighter yarn add github-markdown-css Use fetch to fetch the contents of a Markdown file and render it using react-markdown. import React from ‘react’; import ReactMarkdown from ‘react-markdown’; const App=({url})=>{ const [mdContent, setMdContent] = useState(”) useEffect(() => { Read more…