Hi,
Thank you for your patience to move the arrows from the edge equally please try this css:

@media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
}

expected results mobile:

expected results tablet:

To also change the color and size try adding this css:

@media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
#main .avia-slideshow-arrows a:before {
	color: #bfdc1e;
	font-size: 20px;
    font-weight: 900;
}
}

for this result:

Best regards,
Mike

Hey enfold,

There’s nothing in that CSS which would effect images and container width. Did you try closing the media query properly?

@media only screen and (max-width:767px) {
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
  font-size: 18px;
  text-transform: uppercase;
}
}

Best regards,
Rikard

Hey,

Out of the box that is not possible.

As a workaround, please edit your Hotspot element and give it a custom CSS class (“custom-hotspot” in example below) in Advanced > Developer Settings, add following code to bottom of Quick CSS field in Enfold theme options > General Styling and adjust it as needed

#top .custom-hotspot .av-image-hotspot a {
  color: transparent;
  background-color: transparent;
}
#top .custom-hotspot .av-image-hotspot-1 a::after {
  color: #000;
  content: 'STILLS';
  font-size: 40px;
}
#top .custom-hotspot .av-image-hotspot-2 a::after {
  color: #000;
  content: 'ABOUT';
  font-size: 40px;
}
#top .custom-hotspot .av-image-hotspot-pulse { 
  display: none;
}

Best regards,
Yigit

Hi,
Glad to hear this helped, for mobile it looks like you are overriding the 100vh with 100%!important:

@media only screen and (max-width: 480px){
.av-layout-grid-container {
    height: 100% !important;
}
}

I recommend using 100vh;
and for the inner container you are adding: height: auto !important;

media only screen and (max-width: 767px){
.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    float: left;
    clear: none;
    width: 100%;
}
}

I recommend setting the height to 50vh like this:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main .av-flex-cells .no_margin {
    height: 50vh !important;
}
}

and changing the top padding for mobile to 20px from the current 70px, this looks like the text will then fully show, you could also tweak the font size a little or change the image height a little to allow more room for the text.

Best regards,
Mike

Hey volpagirl,
Thank you for the link to your site, please try this css:

.header_color .main_menu ul ul,
.header_color .main_menu .menu ul li a span,
.header_color .main_menu .menu ul li a:hover {
	background-color: #930c15;
	font-size: 16px;
	font-weight: 600;
}

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

Best regards,
Mike

Hi,

You can change the main font size under Enfold->General Styling->Typography. Sub level links can be set under Enfold->Advanced Styling.

You can add a link like this in the copyright field:

<a href="https://link.to/site">Link text</a>

Best regards,
Rikard

Hi,

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

@media only screen and (max-width: 990px) {
#av-burger-menu-ul li {
    font-size: 24px;
}
}

Best regards,
Rikard

Hi Lene,

Please go to Enfold theme options > General Styling > Typography and adjust “Default Content Font Size” as needed.

Best regards,
Yigit

Hey William,
Thanks for your question, please try this css:

#top.home  #wrap_all .main_color .post-entry.tag-featured-post h2.post-title {
	font-size:32px;
}
#top.home  #wrap_all .post-entry.bloglist-simple .blog-categories a {
	font-size:13px;
}

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

Best regards,
Mike

Hey CopperCityCreative,
Thanks for the link to your site, I see that you have already installed the Font Awesome font, so to add a Font Awesome icon to before the accordion title you first need to find the unicode for the icons you wish to use, for example f09d is a credit card and f3d1 is cash.

Then add the unicode to css like this:

.togglecontainer p[data-fake-id="#toggle-id-1"]:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f09d";
  font-size: 40px;
  padding-right: 12px;
}
.togglecontainer p[data-fake-id="#toggle-id-1"] {
	display: flex;
}
.togglecontainer p[data-fake-id="#toggle-id-2"]:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f3d1";
  font-size: 40px;
  padding-right: 12px;
}
.togglecontainer p[data-fake-id="#toggle-id-2"] {
	display: flex;
}

This is the result:

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

Best regards,
Mike

Hi,
I see you have a custom font size set in your css with !important; it would be best if you change this:

@media only screen and (max-width: 767px)
h3 {
    font-size: 23px !important;
}

If you can’t try this css:

@media only screen and (max-width: 767px) {
#vorstand h3.team-member-name {
    font-size: 12px !important;
}
}

To reduce the top margin of the second row on desktop try this css:

@media only screen and (min-width: 768px) {
#top #wrap_all #vorstand .flex_column.av_one_fourth.column-top-margin {
    margin-top: 25px;
}
}

adjust the number to suit.

Best regards,
Mike

Hi,
I see that you have this custom css:

@media only screen and (max-width: 767px){
.myslider {
    margin-left: -40px;
    margin-right: -25px;
    margin-top: 25px;
    margin-bottom: 0.5px;
}
}

To center the items please change it to this:

@media only screen and (max-width: 767px){
.myslider {
    margin-top: 25px;
    margin-bottom: 0.5px;
}
}

and then add this css:

@media only screen and (max-width: 767px) { 
.responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
    display: flex;
    justify-content: center;
}
}

Then to show the arrows remove your custom css:

.avia-slideshow-arrows.avia-slideshow-controls {
    opacity: 0;
}
.avia-slideshow-arrows {
    display: none !important;
}

Then add this css:

#top #team .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
    opacity: 1;
}

Please see the screenshot in the Private Content area of my test results.

Best regards,
Mike