[Support request] Elements for mobile

[Jana]

How do I decrease the point size of the element header in the html code for mobile? The padding does not do that – it only affects the margins.
Thanks, Jana

[Jana]

I should rephrase this. I know the headings I used in the elements can be differentiated between desktop and mobile – but the mobile size also applies to the table type size. Is there a workaround for this?

And how can I resize a logo that I added to the elements as well – or should I just use a template section for this?

Thanks!

[Elvin]

Hi,

..but the mobile size also applies to the table type size. Is there a workaround for this?

The best way to go about this is to write a CSS @media query for different break points.

Example:

/* Styling for tablets and small desktops */
@media (min-width:769px) and (max-width:1024px){
[your CSS properties here]
}
/* Styling for most mobile devices */
@media (max-width:768px){
[your CSS properties here]
}

And how can I resize a logo that I added to the elements as well – or should I just use a template section for this?

@media query also applies to this. If you can link us to the site your working on and specify which ones you need to style, we can help w/ the CSS write up. 🙂

[Jana]

In this script:
/* Styling for tablets and small desktops */

@media (min-width:769px) and (max-width:1024px){
[your CSS properties here]
}
/* Styling for most mobile devices */

@media (max-width:768px){
[your CSS properties here]
}

What would be my CSS properties if I’m trying to apply it to all my Header elements such as:

<br>
<br>
<br>
<br>
<h1> Our Leadership </h1>

Thank you!

[David]

Hi there,

try this:

/* Styling for tablets and small desktops */
@media (min-width:769px) and (max-width:1024px) {
    .page-hero h1 {
        font-size: 28px;
    }
}

/* Styling for most mobile devices */
@media (max-width:768px) {
    .page-hero h1 {
        font-size: 20px;
    }
}

[Jana]

Thanks, David. I added this to the Additional CSS – it changed the <H1> title but the logo remained the same size
(The logo is in the elements as:

[David]

The Logo in the Hero section is being output by Elementor – you should be able to control its size in the Elementor editor.

[Jana]

Actually, I have the logo in the elements section so I’m not using the Elementor editor – here’s what’s in the elements:

<a href="https://karnerbluecapital.com/"><img src="https://karnerbluecapital.com/wp-content/uploads/2019/09/white-logo-trans.png" height="410" width="250" /></a>
<br>
<br>
<br>
<h1> Our Leadership </h1>

Thanks, Jana

[Jana]

For some reason I’m unable to paste the logo code from the elements.

but basically it’s (link) <img src="logo" height="410" width="250" /></a>

[Jana]

<a href="https://karnerbluecapital.com/"><img src="https://karnerbluecapital.com/wp-content/uploads/2019/09/white-logo-trans.png" height="410" width="250" /></a>

[Leo]

I don’t think using the <br> tag isthe best idea here.

Can you try removing them and add padding-top: 50px; to David’ CSS above?

[Author]

Posts