How do I increase the size of the text contained?


Tags: html,css

Problem :

For the following design shown, I want to increase the size of text contained in it. I am unable to do so.

<span class="my-icon">
   Club Members
</span>

CSS:

.my-icon {
    position: relative;
    display: inline-block;
    width: 10em;
    height: 6em;
    border: .5em solid blue;
    top: 2em;
    text-align: center;
    padding-top: 1em;
    font-family: sans-serif;
    text-transform: uppercase;
    z-index: 5;
    background-color: #fff;
}
.my-icon::before {
    position: absolute;
    border: 2em solid #fff;
    border-bottom: none;
    border-top-right-radius: 2em;
    border-top-left-radius: 2em;
    left: 3em;
    top: -2em;
    content:'';
    z-index: 3;
}
.my-icon::after {
    position: absolute;
    border: 2.5em solid blue;
    border-bottom: none;
    border-top-right-radius: 2.5em;
    border-top-left-radius: 2.5em;
    left: 2.5em;
    top: -2.5em;
    content:'';
    z-index: 1;
}

Here is the output :

enter image description here

and here is the jsfiddle of the above html.

How do I increase the size of the text inside it ? As I increase the size of the font by font-weight, size of the whole container increases. What should I do ?



Solution :

You are using em for your width and height attributes. em is a relative measurement which will be based on the current value/size of your font.

Because of the relative measurement value you're using, your shape will re-size with the font size. Setting your font to bold slightly increases the font size which in turn increases the value of an em.

If your font size is 10px then 1em = 10px; If you change font size to 15px then 1em = 15px;

Either adjust your property values to something that isn't relative, like pixels, or wrap the text within your .my-icon span with another span tag like Dan has done with his solution.


    CSS Howto..

    How to fill Frameless grid dynamically?

    How to make a stable two column layout in HTML/CSS

    How do you read !important in CSS?

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    CSS exit box how to? [closed]

    How to remove some css properties using regular expression?

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How to change the width of css tab according to length of alphabet?

    How do I center and auto-resize this css loader?

    CSS question: how to remove the border from an image in WordPress

    HTML CSS How to stop a table to put the content after it on a new line?

    How to scrape a live java script webpage in R?

    How to Jump-Start PhoneGap App Development [closed]

    how to create this css?

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    Create template page for showing jpg's from direct links [closed]

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    How can I style flexbox children in a multiline

    How to hide show image link on top of another image link

    How to create a border with spaces in it [duplicate]

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    How to customize bootstrap fixed navbar-default so that li elements align downward?

    How do I remove flickering from my HTML page?

    How to improve page speed in google? [closed]

    Show content on and off with Javascript

    How to disable correctly CSS3 transition property when needed

    How can you hide the title tag using CSS?

    How to change tr color on mouse over when there is already implemented?

    How to add css files to a custom module in Odoo 8?

    How to remove mystery indents in a form?