When I open https://bomengeduld.github.io/debadkamers/ on my mobile device, half of the project is not rendering. Only headr & first section is showing. Second section not. It looks completily blanc. It does renders perfect on desktop.
What I have tried so far
1) I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I tried to add css to <style> tag in <head>
3) The css is held in seperate file, and I already tried to add it to the style.css file.
https://github.com/bomengeduld/debadkamers/blob/master/css/responsive.css
It should look like this
You are not referring to the css folder change <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="css/style.css">
Related
I have modified my datatable to be editable but I ran into a display problem and it looked like below:
I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.
What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.
Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.
Try adding an important tag like this to your main css stylesheet to override your bootstrap.
.col-sm-12{width:100%!important;}
In the head section of your html place your custom.css below bootstrap.css to override the styling
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
I am currently working on a blog, and everything on my end (mac) is working perfectly with my html/css. However, when I send the files in a zip to a PC, the css is not reading. I've tried switching the link tag form "style.css" to "/style.css". That did not have any effect on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
Nothing was wrong with the coding. The CSS formatting was rearranged and I made a rookie move of not inspecting before spending hours on google! Just had to go in and put it back to CSS format. Problem solved! Thanks guys!!
I have a project going on, in several components, I need to put styles.
Bootstrap is working fine. But when I added style.css it does not seems to catch up.
I have checked the page source and the style.css file is linked properly to my index.html file.
my file structure:
This is the head tag of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>News Scroller</title>
</head>
It depends, what does your Webpack create when it compiles? How are you even putting your react component into your index.html now?
It seems like those are not there yet. These few things needs to be done:
There should be a div where your react application is mounted
Your index.html shouldn't reference styles.css directly. It's usually imported in your App.js or `Index.js, depending on your naming
In the style.css file, I was writing the CSS selector incorrectly.
I wrote this before : .input-group .input-group-sm .col-md-3
which is not able to select the className.
Instead of this I replaced the "" between the classNames and the CSS rules worked.
I compiled a vuejs app with npm run build and when viewing the result in firefox the CSS does not display. It does load in the network tab and it shows under the style editor but says "0 rules". Everything loads fine when running npm run serve in development.
If I copy the style text and paste it over itself the style loads properly
This is the HTML for my app
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>frontend</title>
<link as=style href=/css/app.36bb3a4e.css rel=preload>
<link as=style href=/css/chunk-vendors.baa7246e.css rel=preload>
<link as=script href=/js/app.fcf42d91.js rel=preload>
<link as=script href=/js/chunk-vendors.ea5cf647.js rel=preload>
<link href=/css/app.36bb3a4e.css rel=stylesheet>
<link href=/css/chunk-vendors.baa7246e.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/app.fcf42d91.js></script>
<script src=/js/chunk-vendors.ea5cf647.js></script>
</body>
</html>
What could be causing this and how can I fix it?
Found out nginx was serving the css file with the content type text/plain instead of text/css. Adding include /etc/nginx/mime.types; to the location block fixed it.
I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.