Forum Replies Created
-
Posts
-
Alle Schriften oder sind es die Überschriften?
Viele der Elemente haben die Möglichkeit die Schriftgrößen von der Screenweite zu setzen.
zB. die Überschriften – wenn du die Moderne Variante wählst, dann ist da:
Es ist auch möglich von Vornherein – varialble Einstellungen via quick css zu setzen.
https://css-tricks.com/how-do-you-do-max-font-size-in-css/f.e. this will work on all modern browsers:
#top.home #av_section_1 .av-special-heading-tag { font-size:min(max(48px,10vw),120px) !important; }and you can now see on your site that the av_section_6 is touched by this – but then you will have a white space!
Sorry
you had to think of the avia-sections too:.responsive.avia_mobile #top .avia-section *[style*="url("] , .responsive.avia_mobile #top .avia-section[style*="url("]{ background-image : none !important; }the first asterisk indicates that only the following elements are choosen – so the avia-section itself is missing.
see again here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
What I think you haven’t quite realized is that there isn’t one tablet – there’s a plethora of different sizes and resolutions.
This is only for ipad:/* ----------- iPad 1, 2, Mini and Air ----------- */ /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- iPad 3, 4 and Pro 9.7" ----------- */ /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 10.5" ----------- */ /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 12.9" ----------- */ /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { }and then you have to think of : Galaxy, Nexus, Kindle etc. pp
I’ve already given you a rough idea of the selector above.
But as soon as you have sections with url and gradient this won’t work either.
.avia_mobile – if you only want to have that rule on mobile devices to work and not on small screens..responsive.avia_mobile #top .avia-section *[style*="url("]{ background-image : none !important; }What do you do with gaps ?
a lot of css rules are set by adding the html class to the css code .responsive
f.e.: .responsive #top .logo img
if your quick css code only has a rule about .logo img this is not able to overwrite the other selector.
You had to be more specific than the given rule. ( https://specificity.keegan.st/ )
ID’s count on that calculation more than classes than pseudo-classes or attribute selectors.Is there a live site that can demonstrate your issue – where the rules do not work as you expected?
And think of : https://github.com/KriesiMedia/enfold-library/tree/master/temp_fixes/Enfold_4_8_2/framework
i had some troubles with that and php7.4x – see here: https://kriesi.at/support/topic/lightbox-and-srcset/#post-1296108
if you open the heading in your layout – where you enter the content ( heading text ) of the heading one option under it you can choose the heading tag.
on the bottom of that tab there is the heading style. These littel borders belong to the classic style. – if you go and choose modern style these borders are gone.
But if you have already set many of these headings, changing them manually might be too time consuming.
Put this to your quick css:.special-heading-border { display: none !important; }you see the layout here: https://kriesi.at/support/topic/icon-boxes-8/#post-1296421
It is important that the content of your list is not part of the iconbox.
The Iconbox element only is for the icon and the heading.
The content you wanted to have in a scroll window must be separated – because we must have different overflow values.The icons you can set what ever you like yourself in the iconbox element.
The shadow is part of the column setting – so it can be removed or adjusted by yourself.It is important that you read the answers carefully – and not only to copy paste the css in the answers.
: no i can not do that for you – i’m participant as you are – maybe a mod is willing to implement this for you.
___________
or if you are familiar with enfold-shortcodes and you know how to get a new page by this – here is the column-section i used on the bottom:
and use the css from here: https://kriesi.at/support/topic/icon-boxes-8/#post-1296475[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='huge' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='telmore1 flexboxed' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-knvcep5w' sc_version='1.0'] [av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-4hq6raq' sc_version='1.0'] [av_icon_box icon='ue837' font='entypo-fontello' title='vidste du, at …' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-3yvn15e' sc_version='1.0' admin_preview_bg=''][/av_icon_box] [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-3athmaa' sc_version='1.0' admin_preview_bg=''] <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Telmore gennemfører en prisændring på kunder</span> <span class="test pum-trigger" style="cursor: pointer;">Vi ændrer oprettelsesgebyret på 5G-modems til 299 kr.</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> <span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span> [/av_textblock] [/av_one_third][av_one_third min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-2vojkaa' sc_version='1.0'] [av_icon_box icon='ue837' font='entypo-fontello' title='Kort nyt' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-2qjmbsi' sc_version='1.0' admin_preview_bg=''][/av_icon_box] [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-20i9gz6' sc_version='1.0' admin_preview_bg=''] <span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span> <span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span> <span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span> <span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span> <span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede</span> <span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span> <span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span> <span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span> <span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span> <span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede</span> <span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span> <span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span> <span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span> <span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span> [/av_textblock] [/av_one_third][av_one_third min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-1nmcieq' sc_version='1.0'] [av_icon_box icon='ue837' font='entypo-fontello' title='Opdateringer på Telman' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-11jp9aq' sc_version='1.0' admin_preview_bg=''][/av_icon_box] [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-ofkiky' sc_version='1.0' admin_preview_bg=''] <ul> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> <li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li> </ul> [/av_textblock] [/av_one_third] [/av_section]maybe you show a little icon that your users can see that there is interaction with that text-block:
.telmore .av_textblock_section:before, .telmore1 .av_textblock_section:before { content: "↕"; position: absolute; left: 8px; top: 50%; font-size: 30px; color: #083a96; }now same test page – but with custom-class telmore1 flexboxed
and the columns set to individual height/*** same as above - shifting the iconbox ****/ .telmore1 .iconbox.iconbox_top { position: relative; top: -100px; margin-bottom: -100px; padding-bottom: 20px; background-color: transparent !important; } .telmore1 .av_textblock_section { height: 400px; /*** this decides how big / long is the scroll-window ***/ overflow-y: scroll; background-color: rgba(255,255,255,0.5) /*** just to see better that there is an extra window to scroll ***/ } /**** now flexbox setting : ******/ .flexboxed .entry-content-wrapper:before, .flexboxed .entry-content-wrapper:after { display: none } .flexboxed .entry-content-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; } .flexboxed .entry-content-wrapper .flex_column { width: unset; flex: 0 1 31%; padding: 0; margin: 0; } @media only screen and (max-width: 1025px) { .flexboxed .entry-content-wrapper { justify-content: space-evenly; } .flexboxed .entry-content-wrapper .flex_column { width: unset; flex: 0 1 42%; padding: 0; margin: 0 0 90px !important; } } @media only screen and (max-width: 915px) { .flexboxed .entry-content-wrapper { justify-content: center; } .flexboxed .entry-content-wrapper .flex_column { flex: 0 1 100%; } }
see difference on responsive behavior – more control with flexbox modeljust wait a little – i think my first idea could work too – so that will be much easier – …
here : columns in equal height – see on top: https://webers-testseite.de/iconbox-with-equal-height/
click to enlarge:
.telmore .iconbox.iconbox_top { position: relative; top: -100px; margin-bottom: -100px; padding-bottom: 20px; background-color: transparent !important; } .telmore .av_textblock_section { height: 400px; overflow-y: scroll } @media only screen and (max-width: 767px) { .telmore .flex_column { margin-bottom: 90px !important } }but to have a better responsive behavior it would be best to control the columns by flexbox model …
can you please send me the link to that page.
Or if you can not make it public – copy the shortcodes enfold generates ( you find them on activating the debug mode) Use the code block vor posting here.first – you can make them smaller – on my page i have this as quick css entry:
.search-result-image img { width: 200px; /**** here you can adjust the image sizes shown ***/ border: 1px solid #aaa } a.slide-image.search_image { overflow: visible !important; } a.search_image .image-overlay.overlay-type-extern { left: 0 !important }next tip: this line of the replaced code:
$searchthumb = get_the_post_thumbnail( $the_id, 'large' );
it will take the large images from enfold recalculation as source for those thumbnails.
if you have:
$searchthumb = get_the_post_thumbnail( $the_id, 'portfolio_small' );it will have that source image for it._____________
see here: https://kriesi.at/support/topic/show-featured-images-in-search-results-page/#post-805253
now the line is on Enfold 4.8.2 line 33
echo "<span class='search-result-counter {$counterclass}'>{$post_loop_count}</span>";replace that whole line 33 with:
$searchthumb = get_the_post_thumbnail( $the_id, 'large' ); echo "<span class='search-result-counter {$counterclass}'>{$searchthumb}</span>";and this to quick css:
.search-result-counter { padding: 0; } .search-result-counter img { width: 100%; height: 100%; border-radius: 100px; }yes – thats it the line
.avia-fullscreen-slider .caption_bottom .slideshow_caption {
has no closing bracket ( and is empty – but that is not the reason for the mismatch )
______________
btw. if you use the code tag here on board
you got two possibilities :- click the code button – enter your code – click again ( now it is shown as /code ) the code button.
- enter your code – activate the whole code you like to have in the code block and click once the code button
The reason why I am so keen on this is not to be petty, but rather that such errors can simply only be found if the code is also there in the original.
For example, without this code block, all the quotation marks change into their oblique variants.
But that could also be an error if they appear like this in the quick css. F.e. by copy them in this notation and paste them to quick css.if these are only #footer flex_columns – try:
@media only screen and (min-width: 768px) { #footer .container { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; max-width: 1600px; } #footer .container::after { display: none; } #footer .container .flex_column { width: unset; flex: 1 1 auto; /*** the first "1" and the auto value has the possibility that column 2 can grow bigger than the others - else 30% ***/ margin: 0 0 20px; } #footer .container .flex_column:nth-of-type(2) { padding: 0 20px; } }adjust the wanted column-width with the flex setting
and adjust the max-width of the container to your needsYou only got one heading row ? Then there must be other things that hamper that responsvie behavior.
I guess a mod should then look at your page in the backend to find the fault.read carefully – my posts – if it works on my Enfold it should work on yours too:
https://webers-testseite.de/?s=Wordpressif you are interested in that solution – just download the logo ( svg ) and we will find a satisfying solution.
PS ( See mobile Solution aswell )
If you will do that – it might be better either to have on the big logo a background behind the letters ( maybe semitransparent) – or to have a littel outline on the letters. Sometimes you got a light background – then the dark outline will be good to have – or you got a dark background- then the white letters have enought contrast.yes – thats what i like to see. This is a logo that could be easily created as svg ( vectorbased ) logo.
You can move Groups in that svg separatly – and the trigger will be the class on header : header-scrolled.see here an example with your approximate logo ( man of tomorrow and avenir next ) and some changings on scrolled version.
of course there is still some css code to be optimized – especially for the responsive case, but this is a possibility to change with one and the same logo portrait and landscape even animated.https://webers-testseite.de/g-parx/
see here your logo : https://webers-testseite.de/g-parx-logo.svg
look to the source code in your browser – you can see that i grouped the way we want to move parts of the logo:
( click to enlarge )
see here: https://kriesi.at/support/topic/show-featured-images-in-search-results-page/#post-805253
and alternative – a little image inside the circle.
go and create a subfolder to your child-theme : includes
put in the edited : loop-search.phpyou can see the edited element here: https://pastebin.com/KQYvfYhm
download: https://pastebin.com/dl/KQYvfYhmonly lines 33,34,35 are added
Guess if the folder structure is similar to the parent folder structure – this will take effect immediately – otherwise try this:
https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-albThe Rest is quick css styling.
you can follow this : https://kriesi.at/support/topic/responsive-table-not-listing-correct-row-style/
on the bottom there is a css solution for that
