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..

    Last inherited display property is inline but computed is block. How is this even possible?

    How do I make cards of different heights fill gap in css? [duplicate]

    How to differentiate between two class of same name in different css on same page

    Where and how to add/edit css in roots starter theme

    React & CSS Modules: how to style components without assuming their content

    How can I style a JavaFX menu and its items in CSS?

    How to animate the movement of inline-block items on page resize (ideally using css)?

    How to apply an effect of white lines crossed to a div with css

    How to change the background colour's opacity in CSS [duplicate]

    How to move one element to the right of another using CSS?

    hover div to show another div

    How to add new CSS rule to inner id

    How to control size of list-style-type disc in CSS?

    How do you determine whether a CSS property requires browser specific prefixes?

    How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

    how to change style of a css element using jQuery

    How do I script such that my panoramic image can be panned left and right up to its edges?

    How to persist checking the screen width in Javascript

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    How to use Bootstrap Glyphicons in Holder.js images

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How to add physics to CSS animations?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How can I add flashing effect to an option tag?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    How to change the background colour of a QWidget inside QStackedWidget using css?

    CSS: How do I get wrapped labels to align

    css - how to stretch a background image across the entire window

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How can I achieve float left at bottom and float right at top with css flexbox?