Widget | CSS customization

[Sala]

@phenomlab sir, on this page i can see the video height is 397, and its being reported to be tall. How can i reduce it using css?

Line 234

<p><iframe title=" " width="706" height="397" src="?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
</div>

In additional css, i’ve iframe { width 100% and height 315 but without important. If i add important, it affects the height of the ads

[phenomlab]

@Sala said in Widget | CSS customization:

In additional css, i’ve iframe { width 100% and height 315 but without important. If i add important, it affects the height of the ads

It will do, yes, because you have this CSS present

div.text img {
    width: 100%;
    height: 315px;
}

You’d need to be more specific here in terms of CSS target. The below would work

.perfmatters-lazy-youtube img {
    height: 500px !important;
}

[Sala]

@phenomlab it was hidden in the outskirts … Thanks for opening my eyes.

[phenomlab]

@Sala no problems!

[Sala]

@phenomlab Sometimes you don’t remember to ask questions until you actually see them. Like onto every page I created, there is a space between the images that I would like to remove using CSS. It was built with a code that looks like this:

<!-- wp:media-text {"align":"wide","mediaId":673,"mediaLink":"https://wordpress.org/patterns/pear-half/","mediaType":"image","verticalAlignment":"center","style":{"color":{"background":"#BE035C"}}} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center has-background" style="background-color:#BE035C"><figure class="wp-block-media-text__media"><img src="/wp-content/uploads/2023/01/sign-in.jpg" alt="Account" class="wp-image-673 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"padding":{"top":"2em","right":"2em","bottom":"2em","left":"2em"}}}} -->
<div class="wp-block-group" style="padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em"><!-- wp:html -->
<p class="has-text-align-center" style="font-size:20px;line-height:1.3"><p class="has-text-align-center" style="font-size:20px;color:#ffffff;line-height:1.2">Bring your .. to fruition!</p></p>
<!-- /wp:html --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text -->

Space

[phenomlab]

@Sala let me have a look. That theme is using inline styling which is bad practice and means you’d have to force override with

 !important

[Sala]

@phenomlab Actually, I was the one who made it utilize inline CSS because I believed it would be a simpler method to lessen the load of http requests.

[phenomlab]

@Sala ah, OK. That wouldn’t have any impact on the http requests as such as its only text that is being requested. The best way to optimise in that case is to minify the css.

[phenomlab]

@Sala That is in the below class

#single .main-article {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 50px 60px;
    -webkit-box-shadow: 0 3px 12px -1px rgba(7,10,25,.1), 0 22px 27px -30px rgba(7,10,25,.1);
    box-shadow: 0 3px 12px -1px rgba(7,10,25,.1), 0 22px 27px -30px rgba(7,10,25,.1);
}

You should experiment with the padding: 50px 60px; to get the spacing you need.

Changing to padding: 0px 60px; ought to do it

Before

After

[Sala]

@phenomlab i tried with 0; and 60; padding, it works fine on desktop but not on mobile version. Somehow on the content on mobile are also squeezed at the center,

Probably @media can be a good thought

[phenomlab]

@Sala Yes, try

@media screen and (max-width: 767px) {
#single .main-article {
    padding: 0px 20px 20px 20px;
   }
}

Result

[Sala]

@phenomlab it’s applied

[phenomlab]

@Sala Working? From what I see, it is

[Sala]

@phenomlab I was expecting you would need my login information for this one, but you solved it without needing to log in! Congratulations! Another thing is that the website appeared to have been zoomed in when I viewed it once using a friend’s laptop, which I believe had a 14 or 15-inch screen. Do you experience this similar problem? Is it possible to make it that you can see a lot when you visit? Just like many forums

“Late reply, my phone became really hot when applying that css” 🥵

[Sala]

Sometime back, it handled huge traffic without lag, wordpress is just superb!

[phenomlab]

@Sala impressive!

[phenomlab]

@Sala hmm - are you sure that your friend isn’t using zoom at the browser level? There’s nothing that would make your site zoom by default. Your friend may also be using large fonts which can make sites already to look larger than they actually are.

[Sala]

@phenomlab i suspect the ads inside the content in articles , are not benefiting from full width of the article div container, probably they’re in some other container? Bcoz all the time (on mobile) they’re positioned at center and with a small width

[Sala]

I will inspect next time, and take some screenshots of the zoom issue.

[phenomlab]

@Sala said in Widget | CSS customization:

probably they’re in some other container?

Yes, likely.