[David Thompson]

Hello Vako.  The featured slider images in desktop mode are cropped, but they are not in mobile.

How can we have them cropped in mobile?

See my site for reference: reachinghappy.com

[David Thompson]

Thanks very much!

[David Thompson]

Thank you, that’s great!

Any chance we could position the mobile social buttons to the left or right as well please?

[David Thompson]

nevermind I think it’s ok now

[David Thompson]

many of my blog posts will no longer load since these changes, please HELP

[David Thompson]

That seems to have done the job, thank you!

 

Where is the CSS saved?  (so that I can make note of the change)

[David Thompson]

This reply has been marked as private.

[David Thompson]

https://www.reachinghappy.com/screenshot.bmp

[David Thompson]

…on a desktop computer, when the browser width is between 865px and 755px (I think) the logo/header suddenly shrinks, but at all other browser sizes it is fine – full width

[David Thompson]

I just tried a solution I found elsewhere, and it sort of works…
<p style=”background: white; margin: 0in 0in 12.0pt 0in;”><span style=”font-size: 13.0pt; font-family: ‘Arial’,sans-serif; color: #222222;”>In my Page-Header.php file, I added the following above all other div statements:</span></p>

<code style="font-kerning: auto; padding-bottom: 40px!important; max-width: 100%; border-radius: 0px; overflow: auto;"><span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"><div class="semi-white-bg"></span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"></div></span>

 
<p style=”background: white; margin: 0in 0in 12.0pt 0in;”><span style=”font-size: 13.0pt; font-family: ‘Arial’,sans-serif; color: #222222;”>Then added this CSS:</span></p>

<code style="font-kerning: auto; padding-bottom: 40px!important; max-width: 100%; border-radius: 0px; overflow: auto;"><span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">.semi-white-bg {</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">    background-color: rgba( 255,255,255, 0.5 );</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">    padding: 20px;</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">}</span>

This isn’t exactly what I want, as it makes the entire image opaque.

And, for some reason it does NOT apply on mobile browsers

 

Any advice would be very much appreciated

Thank you!

[David Thompson]

thank you, but it doesn’t seem to change anything.

I tried increasing the value to 50 and -50, but nothing changes when published

[David Thompson]

https://www.reachinghappy.com

[David Thompson]

sorry, that should say ‘header image’ not logo image

I’d really like to have the image somewhat opaque but only under the text if possible

[Author]

Posts