Topic: adjust font-size pop-over

Author

Posts

November 4, 2015 at 5:47 am #652039

Participant

Hi, I’d like to change the font-size of the popover text (title & content). For some reason it’s so big now that it doesn’t even fit inside:) How can I do that?

Thank you in advance!

November 4, 2015 at 6:31 am #652090

Thai

Moderator

Hi There,

Try adding following CSS under Customize > Custom > CSS:

/* title */
.popover-title {
    font-size: 12px;
}
/* content */
.popover-content {
    font-size: 10px;
}

Hope it helps.

November 4, 2015 at 7:14 am #652145

Maya

Participant

I added the code but the font is still huge. I will post my details in the next post, hopefully there’s a way to crack it:) thank you in advance!

November 4, 2015 at 7:16 am #652146

Maya

Participant

This reply has been marked as private.

November 4, 2015 at 7:52 am #652205

Christopher

Moderator

Hi there,

Please try this code:

.popover h3 {
    font-size: 12px;
}
.popover-content {
    font-size: 10px;
}

Hope it helps.

November 4, 2015 at 8:39 am #652266

Maya

Participant

I added it but it didn’t make the font-size smaller…

November 4, 2015 at 9:29 am #652343

Thai

Moderator

Hi There,

Please update this CSS a bit:

/* title */
h3.popover-title {
    font-size: 12px !important;
}
/* content */
.popover-content {
    font-size: 10px !important;
}

Hope it helps 🙂

November 4, 2015 at 2:18 pm #652730

Maya

Participant

still not…:)

November 4, 2015 at 4:57 pm #652931

Lely

Moderator

Hello Maya,

Our suggested CSS is not working in your site because you have CSS syntax error. There are multiple missing brackets. I’ve checked and cleaned your custom CSS. Please backup the content of your Customizer’s CSS then replace with this:

 body .ilightbox-overlay.light {
    background-color: transparent;
    background-color: rgba(0,0,0,0.10);
}

body .ilightbox-holder.light {
    border: none;
}

body .ilightbox-toolbar.light {
    background-color: transparent;
    border: none;
}

body a.ilightbox-fullscreen {
    display: none;
}

body .ilightbox-holder.ilightbox-next, 
body .ilightbox-holder.ilightbox-prev {
    opacity: 0 !important;
    visibility: hidden;
}

.ilightbox-container iframe {
width: 75%;
margin: 0 auto;
display: block;
}

.ilightbox-holder.light {
    background: transparent;      
    box-shadow: none;
}

/* lightbox settings */
.ilightbox-toolbar.light {
   right: 185px !important;
   left: auto !important;
top: 75px !important;
}

.ilightbox-overlay.light {
opacity: 0.75 !important;
background: #796969;
}

.ilightbox-container {
    padding: 5%!important;
}

h1, .h1 {
  font-size: 6em  !important;
}

h2, .h2 {
 font-size: 5em  !important;
}

h3, .h3 {
  font-size: 4em  !important;
}

h4, .h4 {
  font-size: 3em  !important;
}

h5, .h5 {
  font-size: 2em  !important;
}

h6, .h6{
  font-size: 1em  !important;
}

h1, .h1 {
  margin-top: 0  !important;
}

h2, .h2 {
 margin-top: 0  !important;
}

h3, .h3 {
  margin-top: 0  !important;
}

h4, .h4 {
  margin-top: 0  !important;
}

h5, .h5 {
  margin-top: 1  !important;
}

h6, .h6 {
  margin-top: 1  !important;
}

/*button card weg*/
a.x-face-button {
  display: none !important;
}

.x-face-inner {
    display: table;
    width: 100%;
    height: 100%;
}

.x-face-inner .x-face-content {
    display: table-cell;
    vertical-align: middle;
margin: 5px;
}

/* logo in menu*/
@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 166px;
        background: url(http://www.haimdror.com/wp/wp-content/uploads/2015/10/logo1-e1446220082932.png) no-repeat center center;
        background-size: cover;
        margin-left: 23px;
        margin-right: 0px;
    }
}

.x-colophon.top {
    background-color: #2d3a4b;
    color: #000000;
}
.x-colophon.bottom {
    background-color: #2d3a4b;
    color: #000000;
}

.x-colophon.bottom a {
    color: #fff;
}

.x-colophon.bottom a:hover {
    color: #86cccc;
}

/* social icons color in footer  */
body .x-colophon.bottom .x-social-global a {
     color:#fff;
}

/* social icons color in footer when hovered  */
body .x-colophon.bottom .x-social-global a:hover {
     color:#fff;
}

.x-social-global a.linkedin:hover {
background-color:#86cccc;
}

.x-social-global a.youtube:hover {
background-color:#86cccc;
}

.x-social-global a.facebook:hover {
background-color:#86cccc;
}

.x-colophon.bottom {
  padding: 10px 0;
}
.x-content-band {
  margin: 0;
  padding: 0;
}

.x-block-grid li.x-block-grid-item {
    position: relative;
}

.x-block-grid li.x-block-grid-item .text-on-hover {
    position: absolute;
    bottom: -100px;
    opacity: 0;
    width: 100%;
    padding: 10px;
    background-color: #000;
    background-color: rgba(255,255,255,0.65);
    color: #f06833;
    transition: all 0.5s ease;
}

.x-block-grid li.x-block-grid-item:hover .text-on-hover {
    bottom: 0;
    opacity: 1;
    transition: all 0.5s ease;
}

.x-block-grid.six-up>li {
width: 16.6%;
padding: 0.85%;
}

.x-block-grid.six-up>li:nth-child(6n+1) {
clear: both;
}

/*logo hover over effect */
.change-on-hover {
webkit-filter: grayscale(1); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
}

.change-on-hover:hover {
webkit-filter: none; 
-webkit-filter: none; 
-moz-filter: none;
filter: none;
}

/* ronde hoeken card*/
.x-face-outer.front, .x-face-outer.back {
    border-radius: 17px;
}

/* text color */
.x-ul-icons .x-li-icon {
color: #f06833;
}
/* icon color */
.x-ul-icons .x-li-icon i:before{
color: #2d3a4b;
}

/* card elementen grootte*/
.x-card-inner {
  min-height: 200px;
  min-width: 200px;
  max-height: 200px;
  max-width: 200px;
  margin: 0 auto;
}

/* titel desktop*/
.font_lato {
font-family : Lato, 'Lato';
font-style : normal;
font-size: 150px !important;
margin-bottom: 0px;
margin-top: 0px;
}

/* titel desktop*/
.titel {
font-family : Lato, 'Lato';
font-style : normal;
font-size: 13px !important;
margin-bottom: 0px;
margin-top: 0px;
}

/*titel grootte mobiel*/
@media (max-width: 480px) {
	.font_lato {font-size: 100px !important;
}
}

/* logos in 2 columns*/
@media (max-width: 979px) {
    body #logo .x-column.x-sm, 
    body #logo .x-column.x-sm {
        width: 44%;
        display: inline-block;
    }

}
/*logo mobiel links*/
@media (max-width: 979px) {

.x-navbar-inner {
    min-height: 0px;
}
.masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -55px;
}
}

@media (max-width: 979px){
    .masthead-stacked .x-brand {
        float: left;
    }
    .masthead-stacked .x-btn-navbar {
        margin-top: 0;
        top: -80px;
    }
}

@media (min-width: 980px){
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    margin-top: 10px;
    width: 150px !important;
}
}

/* title */
h3.popover-title {
    font-size: 12px !important;
}
/* content */
.popover-content {
    font-size: 10px !important;
}

Hope this helps.

November 5, 2015 at 5:20 am #653541

Maya

Participant

It does, thank you!!

Only the logo is now cut off on the left side. How can I fix that? Is there also a way to make the logo slightly smaller and horizontally & vertically centered?

Thank you in advance!

November 5, 2015 at 6:26 am #653591

Paul R

Moderator

Hi Maya,

To fix it, kindly change the code in your custom > css that reads


@media (min-width: 980px){
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    margin-top: 10px;
    width: 150px !important;
}
}

To this


@media (min-width: 980px)
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    margin-top: 0;  
    width: 170px !important;
}

Hope that helps.

November 5, 2015 at 1:13 pm #654120

Maya

Participant

yes it works! thank you!

November 5, 2015 at 4:37 pm #654381

Friech

Moderator

Glad we could help, Cheers!

Author

Posts