Hey Guenter,

A first response:

The basic implementation for responsive in enfold is that you have a setting with no media query (description is desktop – no media query) either in css files or set in options and then media queries that override the desktop setting.

I think this is also a historical reason because responsive was added later.

Changing this will certainly break many sites.

But I agree – there is missing an option with a media query for large screens only (wider than 990px).

This would allow:

• set a custom default value for all sizes (and override theme setting)
• set a custom value for each of the 4 devices independently, if not set the custom default value for all sizes or theme default is used

I will think about it a little more.

This can also be used for font sizes and other responsive settings

Best regards,
Günter

Hi,

Thanks for that. I set smaller font sizes for the smaller screen resolutions for you in the element option, and that works as expected. Please review your site.

Best regards,
Rikard

Hi,

Thanks for contacting us!

Please go to Enfold theme options > General Styling > Typography and edit “Default Content Font Size (eg: blog post content) – Selector: body { … }” :)

Regards,
Yigit

Hey JeffTweddale,

Thank you for the inquiry.

Good catch! The font sizes between the posts and pages are different because of this base css code in the layout.css file.

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: justify;
    font-size: 1.15em;
    line-height: 1.7em;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

We will report the issue to our channel and adjust the code accordingly. For the meantime, you can override the default style using this css code.

#top .fullsize .template-blog .post .entry-content-wrapper {
    font-size: 1em;
}

Best regards,
Ismael

Hey HulaSlim,

Thank you for the inquiry.

Are you using the Special Heading element? The size of the font can be changed per device or screen size in the Styling > Font Sizes > Heading Font Sizes settings.

You can also use this css code to adjust the font size of inline headings or titles.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
    font-size: 20px !important;
  }
}

Best regards,
Ismael

Hi,

You can also set different font sizes for different screen sizes in the element option, that might be the first place you should start: https://snipboard.io/gKkjqr.jpg. If you don’t set values for all screen sizes, then the first value will apply.

Best regards,
Rikard

• This reply was modified 3 years, 7 months ago by Rikard.

Hey stefpasi,

You can change the menu font size and colour under Enfold->Advanced Styling, and the caption and heading font in the slider and be changed in the Styling tab in the element options.

I tried loading the content on your front page, but I’m seeing a 503 forbidden error. Please try reaching out to your hosting provider to see if they can tell you why the server is responding with that error message.

Best regards,
Rikard

Hi,
Thanks for the feedback, it looks like I made an error above and used “pt” instead of “px” on the font size, so try this:

#top.single-post .template-single-blog .entry-content-wrapper > .entry-content {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 23%);
    padding: 2%;
    font-family: "Lato";
    font-size: 14px;
}

As for your widgets, you have:
newsbox-2
monsterinsights-popular-posts-widget-2
avia_fb_likebox-2
in the top widgets, and below all other widgets you have:
newsbox-3
monsterinsights-popular-posts-widget-3
avia_fb_likebox-4
note the numbers are different, so please check your widget areas for these added widgets and remove, if you can’t find them please include an admin login in the Private Content area so we can check.

Best regards,
Mike

Hi,

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

@media only screen and (max-width: 767px) {
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 10px;
}

#top #wrap_all .avia-slideshow .av-slideshow-caption {
    font-size: 30px;
}

#top .avia-slideshow .av-slideshow-caption p {
    font-size: 14px;
}
#top .flex_column_table.av-equal-height-column-flextable.av-9y4su-ed9cb8f9ef6e3819ca120920f518c18b {
    margin-top: -115px;
}
}

Best regards,
Rikard

Hi,
Thanks for the links to your importetd post & new post design, with the following css I was able to achieve this result:

Please try this code in the General Styling ▸ Quick CSS field:

#top.single-post .template-single-blog .entry-footer,
#top.single-post .template-single-blog .related_posts,
#top.single-post .template-single-blog .comment-entry,
#top.single-post .template-single-blog .post-meta-infos{
	display: none;
}
#top.single-post .template-single-blog .entry-content-wrapper {
	padding-left: 10px;
}
#top.single-post .template-single-blog .entry-content-wrapper > .entry-content {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 23%);
    padding: 2%;
    font-family: glacial-indifference;
    font-size: 14pt;
}
#top.single-post .template-single-blog .post-title {
	text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    color: #222222;
    font-size: 28px;
    line-height: 1.1em;
    text-align: center;
}
#top.single-post .template-single-blog .post-title:after {
	content: url(https://parkinson-journal.de/wp-content/uploads/2022/06/Blueline-with-red-icon.jpg);
    display: inline-block;
    margin-top: 30px;
}
#top.single-post .container_wrap_first:before {
	content: url(https://parkinson-journal.de/wp-content/uploads/2022/05/Headpic.png);

}

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

Best regards,
Mike

Hey rixi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #main a.news-link {
    text-decoration: none;
}
#top #socket a {
    text-decoration: none;
}
#top #main .news-headline {
	font-size: 20px;
}

Feel free to adjust the font size to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}
.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount .woocommerce-Price-currencySymbol:before {
	content: "\2219";
    text-decoration: none;
    display: inline-block;
    padding: 0 4px 0 3px;
    font-size: 20px;
    line-height: 12px;
}

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

If you don’t want the star before the sale price the use this instead:

.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}

Best regards,
Mike

Hey Murmeltier,
Thank you for your patience and the link to your site, I see the search results content is 13px and the meta info is 11px.
But the font-family on your site is set to ‘glacial-indifference’ in your use any font plugin, do you want to use open sans for only your search results?
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.search-results #main p,
#top.search-results #main .post-meta-infos * {
	font-size: 14px;
	font-family: 'open sans'!important;
}

To add a sidebar on the search results page, enable the Sidebar Settings > Sidebar on Pages option and use the “Displayed Everywhere” widget area in the Appearance > Widgets panel.
There is not an option to add a graphic in the search results page header, but if you link to the image and a mockup we may be able to assist with some custom code.
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.

For the 300 pages that you imported, do you only want to match the font size, or is it a drastic layout change?
Please link to one of the imported pages and one of the new pages that you want it to look like so we can examine.

Best regards,
Mike

Hi,
Thanks for your patience and the link to your site and screenshots, for your slideshow caption “4-Zimmer Wohnung Nbg. – St. Johannis” I recommend add ing css:

@media only screen and (max-width: 430px) { 
#top.home #main h2.avia-caption-title a {
	 font-size: 18px;
}
}

feel free to adjust, perhaps 16px or 14px
After applying the css, please clear your browser cache and check.
For your other items try this css:

@media only screen and (max-width: 767px) { 
#top.home #main #av_section_6 {
	 margin-top: 0;
}
#top.home #main #av_section_6.avia-section-large .content {
padding-top: 0;
padding-bottom: 0;
}
#top.home #main #av_section_5.avia-section-large {
margin-bottom: 0;
}
#top.home #main #av_section_5.avia-section-large .content {
padding-bottom: 0;
}
#top.home #main #av_section_2.avia-section-huge .content {
    padding-top: 0;
    padding-bottom: 0;
}
#top.home #main .avia-builder-el-38 {
    padding: 0;
}

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

Best regards,
Mike

Hey virtualbis,
Thanks for the question, the button you link seems to be out contact form button, the other two seem to be from plugins.
To make them all the same, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .main_color .button,
#top #wp-submit0,
#top .frm_button_submit.frm_final_submit {
    background-color: #faa41a;
    color: #ffffff;
    border-color: #d88208;
    padding: 16px 20px;
    border-radius: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: normal;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
    -webkit-box-shadow: 0 0px 0px #eeeeee;
    box-shadow: 0 0px 0px #eeeeee;
}
#top .main_color .button:hover,
#top #wp-submit0:hover,
#top .frm_button_submit.frm_final_submit:hover {
    background-color: #afceee;
    color: #ffffff;
    border-color: #8daccc;
}

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

Best regards,
Mike

Hi,

Try this instead:

@media only screen and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 40px !important;
}
}

Best regards,
Rikard

Hi,

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

@media only screen and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 40px;
}
}

Best regards,
Rikard