Hey Qgrafica_7,

Thank you for the inquiry.

You can add this css code to adjust the font size of the category sort, but it may become a little too small.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .avia-fullwidth-portfolio #js_sort_items a,
  .avia-fullwidth-portfolio #js_sort_items .text-sep {
    font-size: 8px;
  }
}

Best regards,
Ismael

Hi,
Thanks for the link to your page, when I check I see this:

I recommend this css:

@media only screen and (max-width: 479px) { 
	#top.home #wrap_all #full_slider_1 .av-slideshow-caption .avia-caption-content p {
		font-size: 12px;
	}
	#top.home #wrap_all #full_slider_1 .avia-caption-title {
		font-size: 15px;
	}
}

or this result for small screens (320px):

and this for normal screens (425px)

Please adjust to suit

Best regards,
Mike

Hi,

Did you place the code inside this css media query?

@media only screen and (max-width: 767px) {
 // place the code here
}

You can also adjust the font size by editing the slide. Go to Styling > Font Sizes, then adjust the Caption Content Font Size > Font Size for small screens (480px to 767px, e.g., Tablet Portrait) settings. Click the device icon to adjust the font size for different screen sizes.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Please try @Guenni007’s solution above or use this css code:

ul {
    font-size: 18px; /* Adjust the size as needed */
}

ol {
    font-size: 18px; /* Adjust the size as needed */
}

Best regards,
Ismael

Hi,

Thank you for the update.

Please include this css rule inside the css media query (max-width: 767px) to adjust the font size of the caption content:

#top .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-content p {
    font-size: 18px;
}

Best regards,
Ismael

Hey bemodesign,

Thank you for the inquiry.

Did you add this css code?

#top #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 1em;
}

Please try to temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes to the theme options take effect. Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

We adjusted the css code a bit. Please try it again:

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px !important;
  }
}

Regarding the text color, please edit the slide, then configure the settings in the Styling > Colors panel.

Best regards,
Ismael

Hey aboutnina,

Thank you for the inquiry.

Please try to add this css code to adjust the font size of the caption title on mobile view:

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px;
  }
}

Best regards,
Ismael

Hey Peter,

Thank you for the inquiry.

Are you using the Easy Slider element?

— You can change the heading default by editing any of the slides’ Advanced > Heading Tag settings.

— To center the caption and add a transparent overlay, try configuring the Styling > Caption > Caption Positioning settings.

— The font sizes can also be adjusted in the Styling > Font Sizes panel.

Best regards,
Ismael

Hey whdsolutions,

Thank you for the inquiry.

You can use this css code to adjust the style of the portfolio grid items:

#top .grid-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#top .main_color .grid-entry-title.entry-title {
    background: transparent;
    font-size: 1.8em;
}

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .av-control-minimal .avia-slideshow-arrows a::before {
  font-size: 40px;
  line-height: 10px;
}

Best regards,
Rikard

Hi,

Please try this CSS instead:

.iconbox_icon:before {
  font-size: 40px;
  position: absolute;
  left: 20%;
}

iconbox_icon {
  top: -33px;
}

Best regards,
Rikard

Hey jackis2,

Thank you for the inquiry.

You can use this css code to adjust the style of the phone number container:

#header_main .call {
    background: red;
    min-width: 400px;
    color: white;
    right: 10%;
    top: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'gotham-bold', sans-serif;
    font-size: 1.5em;
}

Best regards,
Ismael

Hey Qgrafica_7,

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

.iconlist_icon .iconlist-char:before {
  font-size: 60px;
}

Best regards,
Rikard

Hey Aeroviews,

That text gets its size from the paragraph element, you can set that size for each screen size under Enfold->General Styling->Typography. Change the default content font size option.

If you want to use custom CSS instead, then you can use this selector:

.iconbox_content_container p

Best regards,
Rikard