Apex Code Development You need to sign in to do that
Don't have an account?
protam Multi External CSS Files in VF Pages
I'm using bootsrapCSS and a custom stylesheet files. they are included in my VF page in this order:
Now I have 2 logos, one for large screens and the other for mobile .. and I want the images to be displayed accordenly, so I gave them custom style (by Id) in style.css file ..
but what happened is: both images are shown regardless the screen size, as VF applys bootstrapCSS rules by default .. is there a way to solve this issue without using the (!important) rule??
here's the code and how the VF applys the style for the small-logo as an example:
[Note: if I disabled the bootstrap rule in the dev console, the custom style will take affect correctly]
<head>
...
<apex:stylesheet value="{!URLFOR($Resource.res,'css/bootstrap.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.res,'css/style.css')}" />
...
</head>
Now I have 2 logos, one for large screens and the other for mobile .. and I want the images to be displayed accordenly, so I gave them custom style (by Id) in style.css file ..
but what happened is: both images are shown regardless the screen size, as VF applys bootstrapCSS rules by default .. is there a way to solve this issue without using the (!important) rule??
here's the code and how the VF applys the style for the small-logo as an example:
[Note: if I disabled the bootstrap rule in the dev console, the custom style will take affect correctly]
//HTML
<a class="navbar-brand" href="#">
<apex:image value="{!URLFOR($Resource.res,'img/mobile-logo.png')}" width="130" alt="" id="smlLogo" />
<apex:image value="{!URLFOR($Resource.res,'img/logo.png')}" id="lgLogo" />
</a>
//CSS (From dev console)
element.style {
}
bootstrap.css:4333
.navbar-brand > img {
display: block; /* !!Active !! */
}
@media only screen and (min-width: 45em)
style.css:69
[id*=smlLogo] {
display: none; /* !! Crossed Out !! */
}