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
0
votes
3 answers

form input columns in same line: dont line break in Mobile view

i have 2 field: name and phone number. In laptop, display same line but in Mobile view display 2 rows How can 2 fields input (name and Phone) display same line in Mobile like Laptop? My current code: https://jsfiddle.net/bvotcode/eLh36azt/4/ …
ti saigon
  • 63
  • 4
0
votes
2 answers

PHP foreach loop with w3 responsive grid

Is there a way to create multiple rows of thirds using w3.css and a foreach loop also to populate the thirds with data from a sample database? Tried using but this would create multiple thirds in a single row instead:
0
votes
1 answer

Full Height Side Nav Bar moves below main div on small screens w/ Flex or w3.css

Without using fixed elements how can I make the attached layout work for both desktop and mobile with either flex-box or w3.css? The rectangle on the left represents the desktop layout and the one on the right represents how it should look on mobile…
sle7en
  • 41
  • 9
0
votes
1 answer

Disable W3.CSS Hover Dropdown

I have the typical W3.CSS hover dropdown, but I want it disabled until ready:
Rewind
  • 2,554
  • 3
  • 30
  • 56
0
votes
2 answers

Labels for buttons redirect to link meant for only the button

I am trying to make this website where you can download some code I made, but I'm not really so good in HTML and CSS. So sorry if I did something very noticeable. Anyways, this is my code: …
itsmii
  • 11
  • 4
0
votes
1 answer

Adding Elements with Ids to a Div so I can access the new Elements with getElementById

[Edit: Thanks to Ganesh's answer, it led me on the right track to what the actual problem was. So thanks for that. The problem was in my for loop I have let i = 0, str = "", which meant I was creating a new str for the loop, which was different than…
Rewind
  • 2,554
  • 3
  • 30
  • 56
0
votes
3 answers

How to make full-width and Responsive table using w3.css

In The w3.css style plugin, w3-responsive makes a table scrollable in small screens but the table isn't full width any more in medium or large screens. I'm looking for a solution to have a table both responsive in small screens and full width in…
Ahmad M
  • 31
  • 5
0
votes
1 answer

using w3.css my accordion works, but text doesn't wrap

My code below is part of a small website using w3.css The accordion opens OK, and the text within the "hide" sections wraps properly. But the text beginning "JOB TITLE" and the other beginning "Job Description:" both fail to wrap, that's to say they…
0
votes
3 answers

How to use w3codecolor for html syntax highlighting?

Based on example here I am trying to use w3codecolor for html syntax highlighting. I have added reference to https://www.w3schools.com/w3css/4/w3.css and https://www.w3schools.com/lib/w3codecolor.js and then call w3CodeColor(); function However…
LP13
  • 30,567
  • 53
  • 217
  • 400
0
votes
1 answer

How to remove background color when clicked on active class

filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("filterDiv"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); …
user11319956
0
votes
0 answers

How do i move the images on the w3 school lightbox?

I'm still new to this website making, and I'm having trouble with w3 schools Light box. I'm trying to move the images around but every time I do manage to move them it seems to look worse and worse. I have messed around with the CSS but still can't…
JLo27
  • 1
  • 1
0
votes
0 answers

Strange css behaviour on Linux server only

I've been venturing into fullstack web dev recently and encountered some strange behaviour on the linux server I'm using to host. I'm aware that going from windows localhost to a hosted linux server can occasionally lead to problems when importing…
0
votes
1 answer

W3.CSS: Tooltip doesn't show outside the responsive table

I'm using W3.CSS and its responsive tables. I would like to add custom tooltips (also from W3), but when I add tooltip into the cell in the first row, then the tooltip is not visible outside the table (see the snippet). Any solution? I have tried…
0
votes
1 answer

Using w3.css themes with theme driven border colors

Is there a way to derive element borders based on current them colors? I'd like to put a border around my but I want to base the borders on my theme colors without also applying the theme color to the content. My needs to give customers the option…
William Jens
  • 422
  • 2
  • 6
  • 15
0
votes
2 answers

Can't render input inline

I'm trying to create an input with an icon indicating its purpose, but it's not rendering how I like: I want the input at the same level as the icon, however, dispite my best efforts: .field { margin: auto; border-radius: 10px; width:…
K. Russell Smith
  • 133
  • 1
  • 11