Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 29, 2025 at 4:28 am #1488692
    CharlieTh

    On a gridrow I have two columns…one with a single-image easyslider with single image, a title, content. The second column is blank, only as placeholder.

    I have two columns because if do all the way across the screen the image/title/content seems VERY tall…not sure why, so this is work around.

    Have noticed when looking at large screens or landscape screens image looks okay…on narrow, phone-like screens, image is chopped vertically and can’t see title or content.

    Figure needs to be full width….and taller.

    What I’d like is the easy slider in a gridrow to match rest of page, but without having i mage a monster high.

    Can you help me with this?

    Have removed my own (poor) css to make first cell full width and taller, but was something like this:
    works…
    // @media only screen and (max-width: 800px) {
    // #top ul.avia-slideshow-inner {
    // height: 265px!important;border: 2px red solid!important;
    // width:100%!important;background:orange!important;
    // }
    // }
    // // #top .first-grid-gallery-cell{
    // // //grid-template-columns: 1fr!important;}
    // // width:100vw!important;background:orange!important;}

    // // }

    **** The section I’m working with is midway down the page…

    Our Home

    The image of a camera lens with text saying:
    Sermon Gallery
    View previous sermons.

    Thanks for any assistance, I am boggled!

    August 29, 2025 at 6:33 am #1488695
    Ismael

    Hey CharlieTh,

    Thank you for the inquiry.

    If you’re trying to make the cell full width on mobile view, try to add this css code:

    @media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  #grid-row-sermon-gallery .flex_cell.av-m1468vbg-aa3f6b6b11bc30df82c6c9554edf7f0c {
    width: 100%;
  }

  #grid-row-sermon-gallery .av-2te0nv-4f0f2b30b99a498ec3744ad012ed1f73 {
    display: none;
  }

  #grid-row-sermon-gallery .flex_cell_inner .avia-slideshow li img {
    min-height: 300px;
    object-fit: cover;
  }
}

    View post on imgur.com

    Best regards,
    Ismael

    August 30, 2025 at 4:04 am #1488762
    CharlieTh

    Thanks so much. I was bogged down in css hell and just couldn’t figure it out. Exactly what I needed! Used your “template” to figure out two more rough spots in my gridrow home page css.

    Truly appreciate it. You can close this now.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘GridRow on Mobile – mobile query to make cell full width’ is closed to new replies.