Images on Mobile View

  • Author
    Posts
  • #161692

    crkhoops
    Member

    Hi Taras,
    When I look at my site on a mobile device (iPhone 11), the images do not adjust for the screen size.

    Is there a global setting I need to configure on the dashboard?

    Or is an issue with the say I am displaying the image? Maybe they need to be embedded inside a column?

    Thanks!
    Steven

    The blog I need help with is crk-hoops.com.

    #161725

    tarasdashkevych
    Theme Author

    Hello Steven,

    “When I look at my site on a mobile device (iPhone 11), the images do not adjust for the screen size.”
    – Are you referring to the images (featured images) that are shown as background section for the page header? Example of the page header section: https://snipboard.io/FNn5b8.jpg

    Thank you,
    Taras

    #161727

    crkhoops
    Member

    Hi Taras – thanks for responding.

    Yes, those are the ones.

    I also noticed two things last night:

    1. On my iPhone11 in portrait view (phone held vertically), the page title is visible, which should not be the case since inserting custom CSS to shrink the size of the font to avoid display (per a recent post in this form).

    2. When I turn my phone to landscape (sideways), the issue with the featured images still exists but the issue with the page title goes away (the title is no longer visible, which is correct).

    I have a feeling the resolution involves a setting to configure mobile responsiveness??? But am not sure. Will wait for your guidance.

    Thank you!

    Steven

    #161736

    tarasdashkevych
    Theme Author

    Steven,
    Thank you for providing additional information.

    The background image in the page header section uses a cover functionality, meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image covers the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    You can reduce the height of the page header in mobile views to change image aspect ratio in this section.

    Please add this custom CSS to your site to change the height of page headers in mobile views:

    
    @media (max-width: 500px) {
      .singular-page-header {
        height: 13em;
      }
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #161737

    crkhoops
    Member

    Thanks, Taras!

    I did add the custom CSS you provided but it did not correct the issue.

    To make sure I am adding it in the correct place, I went to Appearance > Customize and added it in the Additional CSS section.

    Is that correct?

    There is also some other Custom CSS in there, so hopefully they are not canceling each other out.

    Thanks again,

    Steven

    #161738

    crkhoops
    Member

    By the way, the shrinking of the Title font on each page so that it would display on the Admin > All Pages page but not on the webpage itself was brilliant. Makes things so much easier.

    Thank you for the service you provide. It’s invaluable.

    Steven

    #161741

    tarasdashkevych
    Theme Author

    Steven,

    “Thank you for the service you provide. It’s invaluable.”
    – You are always welcome :) Thank you for using the Venture theme on your site!

    “To make sure I am adding it in the correct place, I went to Appearance > Customize and added it in the Additional CSS section.”
    – You did everything correct here.

    “I did add the custom CSS you provided but it did not correct the issue. “
    – I’ve just inspected your site and I cannot locate that custom CSS.

    It’s possible that there is a typo in your custom CSS (Appearance > Customize>Additional CSS). As a result, some style changes, added as a custom CSS, do not work.

    Could you please post all your custom CSS here, so I can inspect it?

    Kind regards,
    Taras

    #161742

    crkhoops
    Member

    Sure thing, Taras.

    Here it is. Thanks in advance. – Steven

    /* Fix form alignemt styling conflict – MRFX-HC-27389867 */
    .entry__choice, .form__label-row div {
    text-align:left
    }
    @media (min-width: 768px) {
    .site-header:not(.scroll-header) .site-branding img {
    display: none;
    }
    .site-header:not(.scroll-header) .site-branding .custom-logo-link::before {
    background-image: url(https://crk-hoops.com/wp-content/uploads/2021/03/Logo-Whitewashed-transparent.png);
    background-size: 250px 150px;
    background-repeat: no-repeat;
    display: block;
    width: 1500px;
    height: 250px;
    content: “”;
    margin: 0 auto;
    }
    .page-header.has-background-cover .overlay {
    opacity:0;
    }
    #primary-header .entry-title {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
    }
    @media (max-width: 500px) {
    .singular-page-header {
    height: 13em;
    }
    }

    #161744

    tarasdashkevych
    Theme Author

    Steven,
    Thank you for posting you custom CSS.

    I was able to locate an error in your custom CSS. Please try this custom CSS instead:

    
    /* Fix form alignemt styling conflict – MRFX-HC-27389867 */
    .entry__choice, 
    .form__label-row div {
        text-align: left
    }
    
    @media (min-width: 768px) {
        .site-header:not(.scroll-header) .site-branding img {
            display: none;
        }
    
        .site-header:not(.scroll-header) .site-branding .custom-logo-link::before {
            background-image: url(https://crk-hoops.com/wp-content/uploads/2021/03/Logo-Whitewashed-transparent.png);
            background-size: 250px 150px;
            background-repeat: no-repeat;
            display: block;
            width: 1500px;
            height: 250px;
            content: "";
            margin: 0 auto;
        }
    }
    
    .page-header.has-background-cover .overlay {
        opacity:0;
    }
    
    #primary-header .entry-title {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
    }
    
    @media (max-width: 500px) {
        .singular-page-header {
            height: 13em;
        }
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #161745

    crkhoops
    Member

    Yessir – this is great and a huge improvement. Thanks for the help! I’ll mark this as closed.

    Steven

    #161757

    tarasdashkevych
    Theme Author

    Steven,
    You are welcome! I am glad I was able to help.

    Feel free to open a new thread in this forum if you’ll have any other questions regarding the theme.

    Kind regards,
    Taras

The topic ‘Images on Mobile View’ is closed to new replies.