• protam
  • NEWBIE
  • 30 Points
  • Member since 2016

  • Chatter
    Feed
  • 1
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
Hi,

I wanted to do the Service Cloud Lightning Trailheads.
Please provide me the link for it.

Regards,
Anshul
I'm using bootsrapCSS and a custom stylesheet files. they are included in my VF page in this order:
<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 !! */
}
Hi,

I wanted to do the Service Cloud Lightning Trailheads.
Please provide me the link for it.

Regards,
Anshul