Hey furkanbutt,

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

@media only screen and (max-width: 767px) {
#socket .social_bookmarks {
    margin: -90px 40% 0 30px;
}
#socket .social_bookmarks a:before {
    font-size: 16px;
}
}

Best regards,
Rikard

Hi,

I checked your settings and they seem to be working as they should, could try to be a bit more specific as to which setting is not working? If you use Standard, then a default theme font size will apply.

Please read this to know when each setting is active:

Default: all screensizes (no media query)
Medium: between 768px and 989px – eg: Tablet Landscape
Small: between 480px and 767px – eg: Tablet Portrait
Very Small: smaller than 479px – eg: Smartphone Portrait

Best regards,
Rikard

Hey ftt123,

The screenshot you posted is not loading, but please try this in Quick CSS:

.av-masonry-sort a {
    font-size: 20px;
    color: red;
}

Best regards,
Rikard

Hi,

According to the following thread, wrapping a long text will not work in an input element. Adding a line break will not work either. You may need to shorten the input value or text, or adjust its font size on mobile view.

// https://stackoverflow.com/questions/5286663/wrapping-text-inside-input-type-text-element-html-css

To adjust the font size, use this css.

.modified_width .button {
    font-size: 11px;
}

Best regards,
Ismael

Hi,

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

#menu-item-19902 .av-icon-char {
  font-size: 20px;
  position: relative;
  top: 2px;
}

Best regards,
Yigit

Hi,
When I check your menu item Alle Kategorien I see the burger icon, try clearing your browser cache.
To apply the above css to the button try this css:

#header_main #menu-item-19902.av-menu-button > a > span.avia-menu-text {
	border: 2px solid grey;
    border-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 15px;
}

screenshot of the expected results:

Best regards,
Mike

Hi,
I see that you have removed the font-size css, but the letter-spacing css remains, since you can not find it please include an admin login so we can help you.

Best regards,
Mike

Hi,

Thanks for the update. If those font sizes are too big for mobile, then you might have to decrease the size a bit. If that is not enough, then you can create copies for mobile, and insert your own breaks.

Best regards,
Rikard

Hey rixi,
Thank you for the link to your site, I see that the font size of the button is 24px due to this custom css:

.avia-button span {
    font-size: 24px !important;
}

if you remove this the font size will go back to 13px and you button will be smaller.
The letter spacing is due to this custom css:

#top #wrap_all .avia-slideshow-button,#top .avia-button,.html_elegant-blog .more-link,.avia-slideshow-arrows a:before {
    padding-top: 20px;
    padding-bottom: 20px;
    letter-spacing: 0.36em
}

try removing #top .avia-button from the css, if there is a certain button you wanted to target with this css let us know and we can help correct your css.
If you can’t find were to make these edits, include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Changing the font of the button text also changing the size of the button, so for two different button sizes you could try this:

@media only screen and (max-width: 767px) { 
#top #main .avia-slideshow-button {
	font-size: 12px;
}
}
@media only screen and (min-width: 768px) { 
#top #main .avia-slideshow-button {
	font-size: 20px;
}
}

To have the button closer to the image in the caption H2, try this css:

@media only screen and (max-width: 479px) {
.responsive #top #main .slideshow_caption h2 {
    font-size: 0px !important;
    line-height: 0px;
    margin-bottom: 0px;
}
.responsive #top #main .slideshow_align_caption br {
	display: none;
}
#top #main .avia-slideshow-button {
	margin-top: 0px;
}
}

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

Best regards,
Mike

Hi,

Did you try to set different font sizes for different screen sizes in the Styling->Font Size tab in the element options?

Best regards,
Rikard

Hi,

Please edit your custom CSS and add following class to your Heading7 CSS code

.avia-content-slider .slide-meta time

So it would look as following

.heading7, h7, .avia-content-slider .slide-meta time {
  color: inherit;
  font-family: 'Open Sans Light; font-size: 15p';
  letter-spacing: 4pt;
}

And add following class to your “aoki-template_line-button”

#top .read-more-link .more-link

Best regards,
Yigit

Hi,

Thanks for the update. You can add as many CSS classes as you wish, just remember to give them unique names:

.orange-13 {
  font-size: 13px;
  color: #ff0000;
}

Best regards,
Rikard

Hey Susanne,

The tag on the front page is h1, and on the sub page it’s h2, and you have this CSS applying to the h2 on mobile:

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
    font-size: 20px !important;
}
}

How do you want to change the h1 for mobile?

Best regards,
Rikard

Hi,

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

.av-masonry-container .av-masonry-entry-content {
  font-size: 14px;
}

Best regards,
Rikard

Hi,

Thanks for the update. There’s no way of doing that using presets in the default editor as far as I know, you would have to use classes in your markup for example:

<p class="black-18">Black 18 content</p>

<p class="gray-16">Gray 16 content</p>

Then add this CSS to Quick CSS:

.black-18 {
  font-size: 18px;
  color: #000;
}

.gray-16 {
  font-size: 16px;
  color: #ddd;
}

Best regards,
Rikard

Hey Josephine,

Thanks for the information!

Enfold theme options > Advanced Styling options override Typography options. So I went to Enfold theme options > Advanced Styling and set H1 font size to default.

Then I went to Enfold theme options > General Styling > Typography and added px to font sizes. They should be inserted as “50px” instead of “50”.

Please review your website :)

Best regards,
Yigit