I am adding bootstrap css file via default.head.blocks.xml
File including successfully but css file is showing after styles-m.css.
But i want to include it top one position.
Like
bootstrap.min.css
calandar.css
styles-m.css
default_head_blocks.xml code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<css src="css/bootstrap.min.css" />
<css src="css/custom.css" />
<script src="js::custom-theme.js"/>
</head>
Please help me how it is possible to to include bootstrap.min.css on first position.
Related
In local dev, everything is great because my Tailwind CSS is taking priority on styling my icons:
However, once I've deployed my app (Vite on Vercel), for some reason the Material Icons style takes priority:
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Come on now!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:400,700', 'Material+Icons']
}
});
</script>
</body>
</html>
I think I could probably apply !important to my Tailwind config but that's clearly not the right answer.
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
I have the following code:
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>EPDM Polymers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
However, The favicon is not showing up on www.epdmpolymers.com I have the favicon.ico file in my images folder. Any ideas?
You have 2 links for favicon.ico, try removing the first link from your code. I guess it would work for you.
Or once again cross-check the path of the image, try using relative path to the file.
For example: If your image is in root/images folder, so use (/images/favicon.ico)
One of my favorite debugging methods is to download and use a favicon.ico file from a working site like http://www.google.com/favicon.ico
If it works then the issue will be because of your file size or
format.
If it does not work then the issue will be either with the
html tag.
To rule out file permission issue try accessing your favicon file
directly using its url through the browser address bar.
I did "ionic start myApp sidemenu" to start a sidemenu app. It starts with the "Playlists" page with 6 items. I click on one of those, say "Raggae" and it takes me to the "Playlist" page. At this point, the sidemenu does not open when I sweep from left to right.
In the following plnkr example from another StackOverflow question, the sidemenu does open after I nagivate to the "Playlist" page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
http://plnkr.co/edit/0RXSDB?p=preview
Is this my local environment problem or something wrong with the sidemenu template code?
With a brute force method, I found out the ionic.bundle.js come with the "ionic start myApp sidemenu" is causing the problem. If I inlcude the ionic 1.0.0-beta.1 version as in the plnkr example, the problem is gone. But the beta version is causing other different behavior in navigation. Hopefully ionic gets better.
This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:
I'm using
#media all and (max-device-width: 480px) {}
to set the specific iPhone css. body {width:;} doesn't work.
Thanks for the help :)
You have to add the following to your page header
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
As in:
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
</body>
</html>