Questions tagged [w3.css]

For questions relating to W3.CSS, a responsive CSS framework created by w3schools.com

W3.CSS is a modern responsive CSS framework from w3schools.com.

Features includes:

  • Modern responsive design (mobile first) by default.
  • CSS equality over all browsers - Chrome, Firefox, IE, Safari, Opera and more.
  • CSS equality over all devices - PC, laptop, tablet and mobile.

References

148 questions
1
vote
0 answers

How to reset opacity for individual tags inside a div after setting in for the whole div tag?

I turned on w3-opacity in the div but I want it only in the background. I want the links and address to display normally. Is there anyway to do this using only W3.CSS? if not, whats the other way? (only using html & CSS) Thanks! (New to html and…
FlyR
  • 13
  • 4
1
vote
0 answers

Scroll bar not visible for first time in 4.4 Kitkat : Cordova Mobile App

I am working on cordova mobile app using jQuery Mobile. I am facing one issue in it. I have several scroll-able div with scroll bar. For first time, the scroll bar is not visible. But if I navigate to another screen and comes back to this, then it's…
1
vote
2 answers

how to display labels inline with inputs, using w3.css

Using W3.CSS, how do we display labels inline with inputs?

Charles Okwuagwu
  • 10,538
  • 16
  • 87
  • 157
1
vote
1 answer

Strange behaviour in template expansion and HTML inclusion

I'm playing with w3.css and want to expand a template and include some HTML. The example is as follows: BUG
ja.
  • 1,329
  • 9
  • 14
1
vote
5 answers

Footer covers my content when using w3.css

I am trying out w3.css for styling, along with knockout, and when I use a footer, it covers the content near the bottom of the page. I have a button at the bottom of my content. When the page resizes or is small enough, the footer covers the…
Quintonn
  • 770
  • 8
  • 29
0
votes
0 answers

unresponsive banner image carousel

/* Full height image header */ .bgimg-1 { background-position: center; background-size: cover; background-image: url("null"); min-height: 100%; }
0
votes
1 answer

Clicking menu button not working until page fully loaded

I have a sidebar menu created with w3school. The issue is that until the page is fully loaded (including images and Adsense advertising), the Menu button does not react to clicks. The javascript code I use is the basic one, inside head tags: var…
Leito
  • 1
0
votes
1 answer

W3.CSS Full Screen Image

I am trying to get an image to fit the entire screen without showing vertical or horizontal scroll bars, the code below work horizontally but I still get a vertical scroll bar. Preferred solution should be done in W3CSS wcs…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/image" class="post-tag grid--cell" title="show questions tagged 'image'" rel="tag">image</a> <a href="../../questions/tagged/w3.css" class="post-tag grid--cell" title="show questions tagged 'w3.css'" rel="tag">w3.css</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 12 '23 at 07:30">asked May 12 '23 at 07:30</time> <a href="../../users/11630000/werner-venter" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11630000.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Werner Venter" /> </a> <div class="s-user-card--info"> <a href="../../users/11630000/werner-venter" class="s-user-card--link">Werner Venter</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">47</li> <li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-75755116"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/75755116/why-does-the-w3-panel-class-from-w3-css-break-my-grid-layout" class="question-hyperlink">Why does the w3-panel class from W3.CSS break my grid layout?</a></h3> <div class="excerpt">Working on a site that uses W3.CSS, I came across this issue where adding a w3-panel class to the grid container messes up the layout of the grid items. This was a bit surprising, as the w3-panel docs only mention that it adds margins and…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/css-grid" class="post-tag grid--cell" title="show questions tagged 'css-grid'" rel="tag">css-grid</a> <a href="../../questions/tagged/w3.css" class="post-tag grid--cell" title="show questions tagged 'w3.css'" rel="tag">w3.css</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 16 '23 at 10:43">asked Mar 16 '23 at 10:43</time> <a href="../../users/4720018/djvg" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4720018.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="djvg" /> </a> <div class="s-user-card--info"> <a href="../../users/4720018/djvg" class="s-user-card--link">djvg</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,722</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="72 silver badges">72</li> <li class="s-award-bling s-award-bling__bronze" title="103 bronze badges">103</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-75014239"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/75014239/using-w3-js-w3-hide-w3-show-with-html-tables" class="question-hyperlink">Using w3.js - w3.hide / w3.show with HTML tables</a></h3> <div class="excerpt">I am working with W3.CSS and W3.JS to create an expandable / collapsible HTML table. The w3.hide() function works fine to hide targeted rows, but when I use the w3.show() function against the same targeted rows, when the rows are displayed, the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html-table" class="post-tag grid--cell" title="show questions tagged 'html-table'" rel="tag">html-table</a> <a href="../../questions/tagged/w3.css" class="post-tag grid--cell" title="show questions tagged 'w3.css'" rel="tag">w3.css</a> <a href="../../questions/tagged/w3.js" class="post-tag grid--cell" title="show questions tagged 'w3.js'" rel="tag">w3.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 05 '23 at 05:36">asked Jan 05 '23 at 05:36</time> <a href="../../users/19958422/phil-mckenzie" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19958422.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Phil McKenzie" /> </a> <div class="s-user-card--info"> <a href="../../users/19958422/phil-mckenzie" class="s-user-card--link">Phil McKenzie</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-73123607"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/73123607/unable-to-create-submenu-with-w3-css" class="question-hyperlink">Unable to create submenu with w3.css</a></h3> <div class="excerpt">I am trying to whilst only using w3.css and font-awesome.css create a simple drop-down multi menu. <html> <title>{{.Title}} - {{.System}} - {{.Time}}
0
votes
1 answer

How can I eliminate whitespace showing up above a w3.css sidebar?

I am building a website using Jekyll and the W3.CSS Framework. I have a sidebar for navigation on large screens which collapses on smaller screens. The problem occurs on large screens. When content in the main div scrolls, the sidebar doesn't scroll…
0
votes
1 answer

Navigation dropdown moving content below not working

I am almost done with my business website https://www.housewashingdelmarva.com/. However, when viewing on my phone and I click the hamburger drop-down menu, the menu goes over my header. I would like it to push the header down when clicked like…
0
votes
1 answer

W3.CSS and Javascript navigation bar Issue

I built a simple website for my business in w3.css from w3schools.com; https://www.housewashingdelmarva.com/ However, when the website is reduced to mobile phone size and the navigation goes to the 3 stacked bars, I can't get it to click and lower…
0
votes
1 answer

Intellij idea code completion for w3.css framework?

I'm using w3.css framework from https://www.w3schools.com/w3css/default.asp which is an alternative to Bootstrap. IntelliJ idea does not show up code completion for this framework. Does anyone know how to set it up in IntelliJ idea? I did add the…
1 2
3
9 10