[Support request] Elements for mobile

Home Forums Support [Support request] Elements for mobile

Home Forums Support Elements for mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1570735
    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

    #1570751
    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!

    #1570949
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1573114
    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!

    #1573124
    David
    Staff
    Customer Support

    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;
        }
    }
    #1592355
    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:

    #1593355
    David
    Staff
    Customer Support

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

    #1593501
    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

    #1593504
    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>

    #1593505
    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>

    #1594182
    Leo
    Staff
    Customer Support

    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?

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.