Hi,

Please try this CSS instead:

@media only screen and (max-width: 767px) {
.home .slideshow_align_caption h2.avia-caption-title {
  font-size: 28px !important;
}

.home .avia-caption-content p {
  font-size: 14px !important;
}
}

Best regards,
Rikard

Hi,
Thanks for the feedback, I was looking for a phone number, but now I see it’s the text in the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 424px) { 
	#header_meta .phone-info {
	font-size:16px;
}
}
@media only screen and (max-width: 767px) { 
	#header_meta .phone-info {
	top: 64px;
    position: relative;
    width: 80%;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey tsvweinsberg,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.home .slideshow_align_caption h2.avia-caption-title {
  font-size: 28px;
}

.home .avia-caption-content p {
  font-size: 14px;
}
}

Best regards,
Rikard

Hi,
Thanks for the feedback, at the smallest mobile screen size, 375px, your link text is about half of the screen width with your current font size 13px:

in order to have these in one line at this screen width you will need to back the font size 8px which would probably be hard to read, you can try with this css:

@media only screen and (max-width: 620px) { 
.avia-buttonrow-wrap.footer-buttonrow .avia-button {
    font-size: 8px;
    padding: 9px 2px 7px;
}
}

To remove the border from the buttons try this css:

#top .avia-buttonrow-wrap.footer-buttonrow .avia-button.avia-color-light {
    border: none;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

It seems like you used to display FontAwesome icons there. You can remove following codes from custom.css file to remove those

#recent-post .slide-meta-comments a::before {
  font-family: "FontAwesome";
  content: "\f086";
  font-size: 22px;
  margin-right: 10px;
  color: #239dd8;
}

#recent-post .slide-meta-time::before {
  font-family: "FontAwesome";
  content: "\f017";
  font-size: 22px;
  margin-right: 10px;
  color: #239dd8;
}

Regards,
Yigit

Hi,

Thanks for that. Please try this CSS instead:

.template-blog .entry-content-wrapper p {
  font-size: 12px;
}

Best regards,
Rikard

Hi,

Thanks for the update. Please try the following CSS as well:

@media only screen and (max-width: 767px) {
.slideshow_align_caption h2.avia-caption-title {
    font-size: 30px;
}

.slideshow_align_caption a.avia-slideshow-button {
    margin-top: 5px;
    font-size: 16px !important; 
}
}

Best regards,
Rikard

Hi,

As a temporary fix you can put the following in theme options -> General Styling -> Quick CSS:

@media only screen and (max-width: 767px) {
#top #wrap_all .av-inherit-size .av-special-heading-tag{ font-size: 0.8em !important; }
}

This reverts back to 4.8.3 behaviour.

But it will override custom settings for mobile < 767px (or you can wait for the next release where I will add some logic to prevent this)
New Size options
Is added to our dev repo.

Best regards,
Günter

Hi,

@thinkjarvis

Thank you for bringing this up.

I checked the font behaviour of the “Special Heading” element with 4.8.3 (a version prior the post css file changes).

Setting Heading Font Sizes – Font Size (Default) to e.g. 50px, responsive Font sizes to “Use default”.

The 50px are used for all devices (because added inline in a style tag).
There is a media query in heading.css:

@media only screen and (max-width: 767px) {
	#top #wrap_all .av-inherit-size .av-special-heading-tag{ font-size: 0.8em; }
}

And this is what I missed to implement when switching to post css file implementation.

And the only difference I can see.

Would adding this help you ?

And I’m also thinking about extending the selectable font sizes with flexible units also for responsive:

vw
em
rem

Maybe an option for pro users to replace the dropdown with input boxes ?

Best regards,
Günter

Hi,

Thanks for the update. You can change the default body font size under Enfold->General Styling->Typography.

Facebook; did you try to activate social icons under Enfold->Header->Extra Elements?

Best regards,
Rikard

Hi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.avia-tooltip .inner_tooltip {
  font-size: 1.5em;
  line-height: 1.65em;
  color: #fff;
}
#top .av-tt-large-width {
    width: 350px;
}
.main_color .avia-tt, .main_color .avia-tt .avia-arrow, .main_color .avia-tt .avia-arrow {
    background-color: #add4ef;
}

Feel free to adjust to suit.
After applying the css, please clear your browser cache and check.
If this still doesn’t work for you then we will need to see your example so we can examine, so please create a test site online.

Best regards,
Mike

Hi,
Thank you for your patience, as I understand your issue, on your History portfolio page: /portofolio-histoire/ you want to increase the masonry mouse-over title with this css:

.masonry-portofolio {
font-size: 22px !important;
}

I didn’t find this css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field or in your child theme ▸ style.css
So I tested this in your child theme ▸ style.css:

and checked with Chrome, Firefox, Edge in Windows and it worked correctly:

I also had the same results in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

Please clear your browser cache and check.

Best regards,
Mike

Hi,

Please try this:

.entry-content-wrapper p {
  font-size: 12px; 
}

Best regards,
Rikard

Hey joshuabcohen,

Thank you for the inquiry.

You can use this css code in the Enfold > General Styling > Quick CSS field to adjust the style of the slider caption title.

.responsive #top .avia-slideshow .avia-caption-title {
    font-weight: 600;
    line-height: 1.2em;
    font-size: 34px;
}

Best regards,
Ismael