Home Forums NewsExo Pro The Header for Single Post are not responsive

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #42654
    Anne Howard
    Participant

    Hi, on mobile devices, the headers (title of the news article )on single posts (individual news stories) does not present properly and break at akward space. Fine on laptop but not on iphone or iPad). How can I resize the headers to display properly? Is there a way to adjust the size of the fonts for mobile ?
    Also, under Header is H1 what controls the size of the title of a single post?

    My news site is scopeweekly.com

    #42655
    themearile
    Keymaster

    Hi Anne

    Please review the screenshot https://prnt.sc/fc9bOcXY0a9m and confirm here: Do you want to display it like this on mobile devices?

    Thanks

    #42656
    Anne Howard
    Participant

    The link doesn’t open.

    #42657
    themearile
    Keymaster

    Hi Anne

    Please try the link below.

    https://prnt.sc/OhCe7F63NXMz

    Thanks

    #42688
    Anne Howard
    Participant

    The second link opened and yes, that would be an appropriate break in the flow. Right now, I have a case, where the header is broken by one letter. Let me show you.
    I can’t upload images to show you!

    #42689
    Anne Howard
    Participant

    Chat gpt has created this code, to address issue with my logo, h2 and h3. Do you approve?
    /********************************************
    * SITEWIDE LOGO SIZE
    ********************************************/
    .site-logo img,
    .custom-logo {
    max-height: 160px !important; /* desktop size */
    width: auto !important; /* maintain aspect ratio */
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    }

    /* Reduce excess header spacing */
    .site-branding,
    .header-main,
    .site-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: unset !important;
    }

    /* Center the logo */
    .site-branding {
    position: relative;
    text-align: center !important;
    }

    .site-logo,
    .custom-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    }

    /********************************************
    * TABLET (under 1024px)
    ********************************************/
    @media (max-width: 1024px) {

    .site-logo img,
    .custom-logo {
    max-height: 130px !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    }

    .site-branding {
    text-align: center !important;
    }

    /* H2 tablet size */
    .entry-content h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    }
    }

    /********************************************
    * MOBILE (under 768px)
    ********************************************/
    @media (max-width: 768px) {

    .site-logo img,
    .custom-logo {
    max-height: 90px !important;
    }

    .site-branding,
    .header-main,
    .site-header {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    }

    /* H2 mobile optimization */
    .entry-content h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.75em;
    }
    }

    /********************************************
    * SMALL MOBILE (under 480px)
    ********************************************/
    @media (max-width: 480px) {

    .site-logo img,
    .custom-logo {
    max-height: 75px !important;
    }

    /* Extra-small mobile H2 */
    .entry-content h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    }
    }

    /********************************************
    * CONTENT IMAGE STYLES
    ********************************************/
    .entry-content img,
    .entry-content figure img,
    .wp-caption img {
    max-width: 100%;
    height: auto;
    }

    /********************************************
    * STYLES FOR POST HEADINGS (h3)
    ********************************************/
    .single-news-area .grid-view-news-area.vrsn-five .post-content h3 {
    word-break: normal;
    font-size: 1.5rem;
    }

    #42691
    Anne Howard
    Participant

    FIXED!

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