Hi Rikard,
thanks for your fast reply!
That works nice with the font-family and the font-size.
But i’m not able to reduce the space above and below the text-block?
I tried to change:

  padding-top: 12px;
  padding-bottom: 8px;

but it does not change as on the screenshot?

kind regards
Jak

Sorry, sure…
I just saw, that i can’t add links to special heading. So i changed it to a text-block with links.
How can i use the same css for the text-block instead of the special heading (i added the class “text-about” in developer settings for this text-block)?

#main .container_wrap_first .av-special-heading.custom-class {
	margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}

and also use this css for the font-style too:

font-size: 18px;
  font-family: zen-kaku-gothic-new;
font-weight: 500;

Sorry for my confusion.

kind regards
Jak

• This reply was modified 1 year, 7 months ago by Jak73.

Hi Mike,

this works great!
How can i add a text styling too:

font-size: 18px;
  font-family: zen-kaku-gothic-new;
font-weight: 500;

Tried to add this to the css above, but it’s not affecting it?

kind regards
Jak

• This reply was modified 1 year, 7 months ago by Jak73.
• This reply was modified 1 year, 7 months ago by Jak73.

Finally success!

.gast_sort {
    position: relative; 
}

.gast_sort .grid-image {
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
}

.gast_sort .grid-image::before {
    content: 'Gast'; /
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(218, 218, 33, 0.5); 
    color: #ffffff; 
    padding: 5px 10px; 
    box-sizing: border-box;
    font-weight: bold;
    font-size: 24px; 
    z-index: 10; 
    text-align: center; 
}

Sounds easy enough!
I added a portfolio category ‘Gast’ and added the following function to ad a custom class to the categorized portfolios, but I cant seem to get the banner to show up.

I added this to functions.php of the child theme:

function add_custom_category_class($classes) {
    if (is_category('378')) {
        $classes[] = 'category-378';
    }
    return $classes;
}
add_filter('body_class', 'add_custom_category_class');

and this to my css:

.category-378 .grid-entry .inner-entry {
  position: relative;
}

.category-378 .grid-entry .inner-entry::before {
  content: 'Gast';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

height: 50px;
background-color: rgba(255, 0, 0, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
transform: rotate(-45deg);
transform-origin: top left;
z-index: 1;
}

Thank you.
I am a bit stumped. I thought it is a quite easy fix, but I run into problems.

My idea is to first figure out how to get anything shown on top of the image. Lets say ‘Test’ and then when that works make it so that it only displays when the portfolio item has a certain attribute. But I am already struggling to get “test” to show up.

Here is the code I found to change:

$image = get_the_post_thumbnail( $the_id, $image_size, $image_attrs );
                    if( ! empty( $image ) )
                    {
                        $output .= '<div class="av_table_col portfolio-grid-image">';
                        $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>{$custom_overlay} {$image}</{$link_markup[1]}>";
                        $output .= '</div>';
                    }
                    $output .= '<footer class="entry-footer"></footer>';
                    $output .= '</article>';
                    $output .= '</div>';

And here is the code I change it to:

$image = get_the_post_thumbnail($the_id, $image_size, $image_attrs);
if (!empty($image)) {
    $output .= '<div class="av_table_col portfolio-grid-image">';
    $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>";
    $output .= "{$custom_overlay} {$image}";
    $output .= "<div class='overlay-text'>test</div>"; // Add this line for the overlay
    $output .= "</{$link_markup[1]}>";
    $output .= '</div>';
}
$output .= '<footer class="entry-footer"></footer>';
$output .= '</article>';
$output .= '</div>';

I also added the following passage to my style.css

.grid-image {
    position: relative; 
    display: inline-block;
}

.grid-image img {
    display: block; 
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px; 
    background-color: rgba(255, 255, 255, 0.7); 
    color: #dada21; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 16px; 
    font-weight: bold; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Unfortunately I dont get the text to show up.
Where is my mistake?

Hi Mike
I managed to change the font to rift in the burger menu and also could change the font size, so for now it’s good for me and i can go on…
Thank you for all your help!
Greetz Karin
Have a nice weekend!

HI.

Adjusting the font size affects the Desktop/Laptop adversely as well as the Cell mode.

This reply does not address why updates to the theme disrupted cell phone layouts.

Q: how do we retain our Desktop/Laptop layouts while regaining an elegant look for the cell mode in responsive Design?

Example pages:

https://www.stonecrafters.rocks/

https://www.stonecrafters.rocks/services/

https://www.stonecrafters.rocks/contact/

NOTE: we have not altered out layout since the initial rebuild of the site using Enfold theme. This site used to look perfect in responsive design.

Please advise. Note: I shared login credentials and you have permission to enter the site.

Hey Mike,

I decided to use a different font family (Open Sans) for mobile and tablet and added this code:

@media only screen and (max-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open-Sans', sans-serif;
font-style: italic; 
}
}

Funnily enough, the Calibri is now displayed as the headline on the iPhone. And I can’t find the reference to the code why the browser finally understands that it should use “Calibri”.
So why it works now, I have no idea, but it works ;)

Unfortunately, Calibri or Open Sans are not displayed on the tablet in Safari. I don’t understand this again…

And I also adjusted the .av-special-heading using CSS:

#top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri' !important; 
    color: #ff0044 !important;
}

Unfortunately the special heading font is not displayed on mobile in Safari… sorry i opened such a bottomless pit …

I hope your team finds a solution to help me out :’)

Hi Guenni,
i will do that now. Sould i keep or delete:

/**** Feld Definitionen ********/

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  { grid-area: feld1 }
/*** depends on if there is a link on the image or not  ****/
#top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 }

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "feld2 feld1";
  align-items: flex-end;
}

#top .avia_textblock.img-with-caption-right .wp-caption img {
  padding: 0 !important;
} 

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  {  
  display: block ;
  color: #222222;
  font-style: normal;
  font-size: 18px;
  font-family: inherit;
  width: 100%;
  padding: 0 1em;
  text-align: left;
}

.avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p {  
  margin: 0 !important;
}

/*** Abstang über dem Rahmen ******/
#top .avia_textblock.img-with-caption-right .wp-caption img {
  margin-top: 70px
}

/**** for responsive case maybe:*****/

@media only screen and (min-width: 990px) and (max-width: 1051px) {
  #top .avia_textblock.img-with-caption-right .wp-caption {
    grid-template-columns: 1fr;
    grid-template-areas: "feld2" "feld1" !important;
  }
}

for css or just add your new css?
kind regards
Jak

• This reply was modified 1 year, 8 months ago by Jak73.