Hi,

Have you found a solution for point 2 as well? Font size is 12px and it looks fine on my end, I attached a screenshot in private content field.

If you would like to decrease the size even more, please add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

#top #full_slider_2 .avia-slideshow-button {
  font-size: 10px !important;
}

Best regards,
Yigit

Hey,

Thanks for contacting us!

1- Please edit your Color Section element that contains your 3 blocks and go to Advanced > Developer Settings and give it a custom ID (“my-custom-id” in example below) and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling

@media only screen and (max-width: 990px) { 
#top #my-custom-id .flex_column_table {
  margin-top: 0;
}}

2- You can duplicate your Slider element, choose to display different slide image in your duplicated slider and then edit your element and go to Advanced > Responsive and choose to hide duplicated slider on desktop and choose to hide your existing slider on mobile.

3- You can edit your slide and go to Styling > Font Sizes and choose different font sizes for different screen sizes – https://imgur.com/a/XbHsUlM :)

Best regards,
Yigit

Hi,

Thanks for the update. Are you trying to target the home class on your home page in the code you posted? If so, then please try this instead:

@media only screen and (min-width: 990px) and (max-width: 1440px) { 
.home .maintitle {
font-size: 1.2em;
line-height: 1em;
padding: 0px 1em;
}
}

The # character is used for ID’s only. Also, you might need to be a bit more specific in your CSS, as I see that you have different markup in the element which you applied the class to.

To target the h1 element, you might need something like this:

@media only screen and (min-width: 990px) and (max-width: 1440px) { 
.home .maintitle h1 span {
font-size: 1.2em;
line-height: 1em;
padding: 0px 1em;
}
}

Best regards,
Rikard

Hey aluca6,

Thank you for the inquiry.

The title and the breadcrumb are not aligning correctly on mobile view because of this css code.

.main-title.entry-title, #top .alternate_color.title_container .main-title a {
    left: 44% !important;
    margin-bottom: 60px !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    color: #660000 !important;
}

.main-title.entry-title, #top .alternate_color.title_container .main-title a {
    left: 44% !important;
    margin-bottom: 60px !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    color: #660000 !important;
}

.title_container .breadcrumb {
    left: 44% !important;
    padding: 0;
    background-color: #fff !important;
    font-family: 'Lato';
    font-style: italic;
}

The left property adjusts the position of the title. You may need to wrap the code inside a css media query so it doesn’t affect the mobile view.

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
}

Best regards,
Ismael

Hey Chiefi,

Thank you for the inquiry.

Instead of applying the background to the color section, try to add a 1/1 column element inside the section and apply the background to it. You can adjust the font size and other element styling in the Enfold > General Styling panel or edit the element and go to the Styling tab.

Best regards,
Ismael

Hi,

Please try this CSS as well:

.sidebar .product_list_widget span.product-title {
  font-size: 18px !important;
}

Best regards,
Rikard

Hi,
Thanks for the login, I added this css:

li.ife span.avia-menu-text:before {
  content: "\e84f";
  font-family: 'entypo-fontello';    
  font-size:20px;
  padding-right:10px;
  }

and a custom class to your menu item:

and now the book icon shows:

please clear your browser cache and check.

Best regards,
Mike

Hi,

Please try this CSS instead:

.sidebar .product_list_widget li {
  font-size: 18px;
}

Best regards,
Rikard

Hi Franz,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

#top .logo .subtext {
  color: white;
  font-size: 20px;
}

If you would like to make further changes, please post a screenshot and show them. You can upload your screenshots on imgur.com and post the links here :)

Regards,
Yigit

Hi,

This URL is returning a 404 error on my end: https://trikego.com/it/store/, please check it and post a new URL.

Please try this CSS for the categories:

.template-shop .product_meta {
    font-size: 18px;
}

Best regards,
Rikard

Hey klkc,

Thank you for the inquiry.

You can use this css code to adjust the font size of the portfolio title and content.

.grid-entry-title {
    font-size: 21px;
}

.grid-entry-excerpt {
    font-size: 16px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

Best regards,
Ismael

Hey ladefogedpeter,
Thank you for the screenshots and link to your site, please try this css in your Quick CSS:

@media only screen and (min-width: 990px) and (max-width: 1440px) { 
#top.home #overlap .avia-image-container .av-image-caption-overlay-center {
	font-size: 1.4em;
	line-height: 1em;
	padding: 0px 1em;
}
}

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

Best regards,
Mike

Hey Ramon,
Thank you for the link to your site, the closest I could come to your request is this script and css that shows the gallery image thumbnail alt tag on mouse-over:

which works ok if the alt tag doesn’t contain too much text, since the image needs to be clickable to view the larger image above if there is too much text you can’t click the image.
If you want to try this, add this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_gallery_tooltip_script() { ?>
    <script>
(function($) {
	setTimeout(function(){
  $("#top.single-product .flex-control-thumbs>li>img").wrap('<div class="alt-wrap"/>');
  $(".alt-wrap>img").each(function() {
    $(this).after('<span class="tooltip">' + $(this).attr('alt') + '</span>');
  });
	},300);
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_gallery_tooltip_script');

and this code in the General Styling ▸ Quick CSS field:

.alt-wrap { 
  display: block;
  position: relative;
  margin: 0px;
}
.alt-wrap span.tooltip {
  opacity: 0;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  line-height: 12px;
  background-color: rgba(0,0,0,0.8);
  transition: all 300ms ease;
  transition-delay: 300ms;
}
.alt-wrap:hover > span.tooltip { 
  opacity: 1; 
  transition-delay: 0s;
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hey Julio,
It looks like the footer icons are html pasted into a text widget, is this correct?
If so please include an admin login and we can adjust the html to use the icon in the socket.
to increase the icons try this css:

#footer .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#footer .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#footer .social_bookmarks {
    height: 60px!important;
}

As to changing the green-yellow color of the icons, what color do you want them to be?

Best regards,
Mike

Hi,
Thank you for the login, to correct your mobile header I had to adjust your custom css for the social_bookmarks by putting it in a media query like this:

@media only screen and (min-width: 767px) { 
#top #header .social_bookmarks li a {
    font-size: 25px;
}
#top .social_bookmarks li {
     margin: 0 5px;
}
}

and I had to add your “make header larger & move over” css to another media query like this:

@media only screen and (min-width: 1440px) { 
	/* Make header larger & move over */
#header_main .logo, 
#header_main .logo a {
    overflow: visible;
}
#header_main .logo img {
    height: 90px;
    position: relative;
    max-height: none;
    right: -90px;
    top: 15px;
}
#top nav .social_bookmarks {
   float: right;
   left: auto;
   width: 10%;
}
}

But I notice your desktop your header widget is overlapping your social_bookmarks because you have it set to right: 300px;, I would recommend using right: 30%; instead.

Best regards,
Mike

Hey Julio,

Thank you for the inquiry.

As we mentioned in the previous thread, it is possible to apply a unique ID or class name to any elements in the builder including the Text Block and the Special Heading element. Just edit the element, then go to the Advanced > Developer Settings panel to apply the class name or the ID. You can then use those attributes as css selectors to adjust the style of the element.

Example:

.your-custom-class { font-size: 100px; }

Best regards,
Ismael`