Thumbnail-Image – how to get responsive?

Hi Stefan

How’s your CSS? It would probably be better to apply the decoration using CSS. You could give each widget a class in the Attributes tab and then target that class.

Hi Andrew,

thank you very much!
Well, i’m not that CSS-Expert;) just more “basic-knowledge”. But nevertheless, the code for this cell is now:
>>>
.panel-widget-style {
background-image: url(https://stefan-bee.de/customer/hipp-drehteile/wordpress/wp-content/uploads/2018/04/contentbutton-blue_70x140px.png);
background-position: center center;
background-size: cover;
}
<<<

Can you give me a hint how the correct css-code is?
Defining a special class might not be a real problem for me.

Thanks again,
Stefan

Hi Stefan

This would be challenging to achieve using the CSS Style block. Rather apply a class to your widget by editing the widget, clicking Attributes and then inserting into the Widget Class field a class name like:

accent

And then in Customizer > Additional CSS you’d add something like:

.accent .widget-title:before {
    background: #315B9D;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    vertical-align: baseline;
    width: 8px;
}

Hi Andrew,

okay… i’ve called this class now “bluebox”. CSS is:

.bluebox{
background: #1F3685;
content: “”;
display: inline-block;
height: 2.5em;
margin-right: 0.5em;
vertical-align: baseline;
width: 1.25em;
}

It works rather fine… but now are two questions:

a) on Mobile Devices Headline font (h3) appears bigger than on bigger devices – why? And where can i change this?

b) how can i achieve that alignment also on Mobile Devices is left (and not centered)?

Hi ??

a.) This is a theme support challenge. The theme is setting this heading size on mobile using !important. You can try changing it back with:

@media (max-width: 767px) {
	.panel-grid h3.widget-title {
		font-size: 18px !important;
	}
}

b.) Have you solved this? The heading on mobile is aligned left by the looks of it.

Hey Andrew!

Thanks again!

>This is a theme support challenge.
LOL okay… life might get boring without any challenges ??

a) PERFECT – thx!

b) no, i didn’t… and i can look whereever i want (Firefox / Chrome / …) – it is still centered… :-/

Glad there has been some progress ??

I’m not quite following your implementation, it isn’t quite what I sent. See how I was targeting the widget title? My implementation meant that you would add the blue box without any images. Now you have the image for the blue box as well as custom CSS. My rule was basically saying, locate the widget title and add an element before it and make it into a blue box. No images required.

The centring is most likely coming from a CSS declaration that’s been added. Check the row or the widget Attributes and the CSS Styles field, there is a text-align: center in there somewhere.

yes, i know… i’ve just included the image because of when i clear it, there appears NO blue box ?? see https://stefan-bee.de/customer/hipp-drehteile/wordpress/
I’ve deleted the image in the first box.

Regarding centring: This works now also!! ?? I’ve included this code:
.panel-grid-cell{
text-align: left;
}

May i ask a further question? Is there a way to make the “blue box” as well as the headline (“Pr?ziseste Verarbeitung…”) side by side?

At the moment you have:

.bluebox{	
background: #1F3685;
content: "";
display: inline-block;
height: 2.5em;
margin-right: 0.5em;
vertical-align: baseline;
width: 1.25em;
}

The rule I suggested targeted the title, so change your rule to:

.bluebox .widget-title:before {
    background: #315B9D;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    vertical-align: baseline;
    width: 8px;
}

i did it now exactly as you suggested… but now every content-box appears totally different…. ??
This is the reason why i changed the code before, against your suggestion

puuuh… very difficult :-/

The class isn’t being applied in the correct area. At the moment bluebox is applied to an empty area with no title in it so it can’t work. Remove the empty cell and apply the class to the row level. Either that or apply the bluebox class to the widget that contains the title in it.

Or abandon the bluebox class and apply this style to all widget titles. This might not be appropriate for all pages though. That would look like this:

.panel-grid .widget-title:before {
    background: #315B9D;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    vertical-align: baseline;
    width: 8px;
}

Adjust the width and height as required.

ok… i followed your first suggestion (add bluebox to row-level), but for the moment just in the first box.
Works, but the result doesn’t look like what i want to have: The blue box should appear side by side to the Headline, v-align to the baseline of the headline :/

Your second suggestion gives the same result

• This reply was modified 6 years, 11 months ago by stef7777.

You can adjust the setup to use absolute instead, here we go:

.bluebox .widget-title {
    margin-left: 30px;
    position: relative;
}

.bluebox .widget-title:before {
	background: #315B9D;
	bottom: 0;
	content: "";
	display: block;
	height: 38px;
	left: -30px;
	margin-right: 10px;
	position: absolute;
	vertical-align: baseline;
	width: 20px;
}

Adjust the values as required.

• This reply was modified 6 years, 10 months ago by Andrew Misplon.

Hi Andrew!
WOW – thank you very very much!!!
That works nearly perfect! The only thing is that in boxes with smaller headlines (e.g. “Fertigung mit h?chster Pr?zision”) the bluebox appears too far up. So i tried to add the line “height: 38px;” in the first section – that works fine! Or is sth. to say against this?

Furthermore, i get a warning notice that “vertical-align: baseline” won’t work with “display: block”. But seems to have no adverse effect.