Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 13, 2021 at 10:34 pm #1300203
    Hidealoo

    WP: 5.7.2 – Theme: 4.8.2 – Child.

    Have created a Grid Row Header with 2 columns. In the first column, I have set a background image with the aid of CSS (added in Additional CSS).
    “Custom height in pixels” – Minimum height = 450px

    Advanced Developer Settings – >
    Custom ID Attribute – pageheaderhomepage
    Custom CSS Clas – avia-full-stretch

    @media only screen and (min-width: 768px) {
#pageheaderhomepage {
background: url('https://hidealoo.com/wp-content/uploads/2021/05/hidealoo-banner-page-white-bg-2000x1000-1.jpeg') left top no-repeat scroll;
}
}

@media only screen and (max-width: 767px) {
#pageheaderhomepage {
background: url('https://hidealoo.com/wp-content/uploads/2021/05/hidealoo-banner-page-portrait-white-bg-769x1200-1.jpeg') left top no-repeat scroll;
height: 300px;
min-height: 300px;
}
}

    I wish to reduce the height on a mobile device to 300px or full height f the mobile device screen. Can this be done please?

    Other details in Private Content.

    Thank you.

    May 16, 2021 at 8:40 am #1300516
    Rikard

    Hey Webmaster,

    I’m not sure I understand your intentions, do you want different height for the element in question for smaller mobile screens maybe? If so, then you add more than one media query, like so:

    @media only screen and (min-width: 300px) and (max-width: 767px) {
#pageheaderhomepage {
background: url('https://hidealoo.com/wp-content/uploads/2021/05/hidealoo-banner-page-portrait-white-bg-769x1200-1.jpeg') left top no-repeat scroll;
height: 300px;
min-height: 300px;
}
}

@media only screen and (max-width: 299px) {
#pageheaderhomepage {
background: url('https://hidealoo.com/wp-content/uploads/2021/05/hidealoo-banner-page-portrait-white-bg-769x1200-1.jpeg') left top no-repeat scroll;
height: 200px;
min-height: 200px;
}
}

    Best regards,
    Rikard

    • This reply was modified 3 years, 6 months ago by Rikard.
    May 16, 2021 at 5:46 pm #1300578
    Hidealoo
    This reply has been marked as private.
    May 18, 2021 at 9:00 am #1300896
    Rikard

    Hi,

    Thanks for the update and clarification. Maybe it would be better if you hide the current layout for mobile, and create a different layout using Color Section elements for mobile instead then? You can set the height in the Color Section options.

    Best regards,
    Rikard

    May 18, 2021 at 7:29 pm #1301067
    Hidealoo

    Hi,

    and thank you for the information.

    Added a Color Section with a height of 85% containing 2 columns. The Color Section has a background image. The first column is empty. The second column has a text box.

    I can’t get the Color section background image to display. I require the 2nd column to be vertically aligned to the bottom of the screen.

    Thank you.

    May 20, 2021 at 6:33 am #1301324
    Rikard

    Hi,

    Thanks for the update. The background image is displaying fine on my end, could you post a screenshot of the problem you are seeing on your end please?

    I don’t think it would be possible to vertically align the second column to the bottom of the screen unfortunately, since you would have to align it differently for every screen size.

    Best regards,
    Rikard

    May 20, 2021 at 8:37 am #1301332
    Hidealoo

    Morning,

    thank you for your reply.

    I have included a screenshot from a Sony Xperia mobile phone. The BG image appears when viewed in a reduced width browser (Chrome & Firefox), but sometimes the BG doesn’t show in the browser, but reappears after a browser Refresh (Ctrl+F5)?

    Screenshot

    What is the best method to display text at the bottom of a mobile screen, please?

    Thanks.

    May 21, 2021 at 11:28 am #1301585
    Rikard

    Hi,

    I’m seeing the same thing on my end now, this is the URL for the image:

    url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E)

    If you are trying to use SVG images, then those are not supported unfortunately. Please try PNG or JPG image to see if that works better.

    If you need to position something in an absolute position, like at the bottom of the screen, then you would need custom CSS for that: https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

    Best regards,
    Rikard

    May 21, 2021 at 11:06 pm #1301710
    Hidealoo

    Hi,

    I’m not using SVG but JPEG with SMUSH. Please login and verify the use of JPEG files.

    I believe that something has been corrupted :(

    Any further help, please?

    Many thanks.

    May 24, 2021 at 5:56 am #1301910
    Rikard

    Hi,

    Thanks for the update. The image you have used is JPG, but the theme doesn’t generate that type of code which I referred to above. Could you try disabling the plugin in question, and try adding the image back again, to see if that changes anything please?

    Best regards,
    Rikard

    May 24, 2021 at 5:45 pm #1302083
    Hidealoo

    Thanks again for your ideas.

    The problem could be with the generated HTML code for the Color Section when the background image is inserted via the page builder. When the CSS code is added to the Customised CSS section to set the background image for the Color Section, the image appears as expected.

    Problem solved, please close this ticket :)

    Thanks.

    May 24, 2021 at 10:31 pm #1302098
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Grid Row Different Height on Mobile Device?’ is closed to new replies.