Hey shoo!

The width in my earlier css was an example. It needs to be adjusted to encapsulate the text like it’s shown in the below screenshot
http://www.awesomescreenshot.com/image/409089/535d8c0282a72e0160fd841cba49049f

Here is the css I used for this example:

.avia-caption-title {
  font-size: 22px;
  background-color: #000000;
  width: 730px;
}

.avia-caption-content {
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.7);
  width: 440px;
}

Best regards,
Dake

Hey jmorillo!

1.) I can see the issue with menu overlapping menu on tablet landscape mode. Use this code to enable mobile menu instead:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
nav.main_menu {
display: none;
}
a#advanced_menu_toggle {
display: block;
}}

2.) Text is cut: I suggest to make font size a little bit smaller:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.av-special-heading.av-special-heading-h1.blockquote.modern-quote.modern-centered.avia-builder-el-2.el_before_av_button.avia-builder-el-first.av-thin-font.av-inherit-size {
font-size: 49px !important;
}}

3.) Add background-color to the code from 2.):

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.av-special-heading.av-special-heading-h1.blockquote.modern-quote.modern-centered.avia-builder-el-2.el_before_av_button.avia-builder-el-first.av-thin-font.av-inherit-size {
background-color: red;
}}

Adjust as needed.

4.) Rebajado button:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
span.onsale {
position: relative;
}}

5.) Price is cut:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#top .price, #top .price span, #top del, #top ins {
font-size: 9px;
}}

That is already quite a lot of customization, which needed a lot of time. Normally we would ask you to open separate ticket for each task/code/issue, so others from our team can answer simultaneously and you would get a faster reply.

Best regards,
Andy

Hi Mkieling!

Try Dashboard > Enfold > General Styling > Fonts. There is an option for setting the theme default font size there.

Cheers!
Elliott

Hey shoo!

In order to add a highlight to the text, you can try using the below css, but it would affect each slide:

.avia-caption-title {
  font-size: 22px;
  background-color: #00ff00;
  width: 200px;
}

.avia-caption-content {
  font-size: 12px;
  background-color: #00ff00;
  width: 500px;
}

Alternatively, you could enlist the help of a freelancer to add this feature to the first slide only.

Regards,
Dake

Hey Aleigh!

How are you trying to change it? Reduce the font size? Reduce padding between elements?

Regards,
Elliott

Hey mawebdesign!

Add this to your custom CSS.

#header_meta .sub_menu a {
  font-size: 16px;
}

Best regards,
Elliott

Hi Mborie!

You could give the elements a font size using vw units which scale depending on the screen width.

font-size: 50vw;

Or you could use some media queries to change the size on different screen sizes.

@media screen and (max-width: 767px) and (min-width: 900px) { /* set it to 50px */ }
@media screen and (max-width: 400px) and (min-width: 767px) { /* set it to 25px */ }
@media screen and (max-width: 400px) { /* set it to 12px */ }

Or you could add the text inside the image itself.

Cheers!
Elliott

• This reply was modified 10 years, 8 months ago by Elliott.

Hi PRuuPH!

In order to affect a single page or post you can use a page-id to apply the changes to that page/post only:

.page-id-37 .main_color .av-inner-masonry-content, .main_color .avia-arrow {
  background-color: red;
}

Font Color:

.av-masonry-entry .av-masonry-entry-title {
line-height: 1.3em;
margin: 0;
font-size: 15px;
}

Overlay opacity:

.avia_desktop .av-hover-overlay-active .av-masonry-image-container {
opacity: 0.5;
}

Cheers!
Dake

Hi!

would be better for us if you separate each question/issue into different tickets, because then we can answer simultaneously and you would get a faster reply.

2.) I can’t see any captions for mobile devices. Did you remove them? Could you please provide us admin access so we can take a deeper look? post login details here as private reply.
However, try this code to control font-size of captions:

.av-inner-masonry-content-pos {
font-size: 6px;
}

and this to control height of captions:

figcaption.av-inner-masonry-content.site-background {
height: 35px;
}

Hope this helps.

Regards,
Andy