Elements for mobile

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!

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. :)

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!

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;
    }
}

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:

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

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

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>

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

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?