0

I am trying to include a simple css components as in below,

<apex:stylesheet value="https://www.w3schools.com/w3css/4/w3.css"/>
    <apex:form >
        <div class="w3-panel w3-leftbar w3-sand w3-medium w3-serif">
            <p>Do not change the Column Header</p>
        </div>
    </apex:form>

This is working fine, but sidebar and header fonts become very larger.. Whats the reason for this?

1
  • Hi @Vignesh, please mark as answer if it solved your issue. Thanks :)
    – Learner
    Commented Apr 26, 2018 at 10:56

1 Answer 1

1

I looked at the issue and looks like your css isn't scoped to apply just for your content.

You can do the following things

a. turn off standard stylesheets completely by disabling your header and sidebar for your page using

  <apex:page standardStylesheets="false" showHeader="false" sidebar="false" >
  ...
  </apex:page>

b. improve your stylesheet to scope to your div

Stylesheet
.mycustom { font-size: 15px; }
.mycustom .w3-panel {... }

<!-- VF would have something like -->
<apex:page>
    <div class="mycustom">
       <apex:form >
           <div class="w3-panel w3-leftbar w3-sand w3-medium w3-serif">
               <p>Do not change the Column Header</p>
           </div>
        </apex:form>
    </div>
</apex:page>

I would suggest b.

FYI: Upon inspecting the css I observed that the font size of body was being set to 15px, which probably caused the zoom issue. w3.css is setting a different font size from salesforce standard.

Issue CSS

1
  • Hi, I have slightly made changes as you suggested and its working fine now :) Kudos
    – VigneshSF
    Commented Apr 26, 2018 at 12:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .