Search code examples
htmlcssmobile-websitequarto

Omit images from mobile version of Quarto website

I have a quarto website I built in r. The website works, however I have included images in the sidebar that are large and come in front of my text when I view it on a mobile device. Is there a way to omit the images when it is viewed on a mobile device?

The .qmd file for one page is the following:

---
title: "Page1"
---

## Header

::: column-margin
![](images/image_1.JPG)
:::

*Text text text text

*Text text text text

*Text

![](images/image_2.jpg){fig-align="left"}

and my yml file is the following:

project:
  type: website
  output-dir: docs

website:
  title: "Title"
  navbar:
    right:
      - href: index.qmd
        text: Home
      - page1.qmd
sidebar:
    title: "Test Website"
    style: docked
    collapse-level: 2
    contents:
      - section: ""
        contents:
          - "index.qmd"
format:
  html:
    theme: Zephyr
    embed-resources: true
    toc: true
    toc-expand: FALSE
    toc-depth: 4
    toc-location: right
    toc-collapsed: false
    grid:
      sidebar-width: 300px
      body-width: 1000px
      margin-width: 500px
      gutter-width: 1.5rem

editor: visual

with my index.qmd being simply:

---
title: ""
about: 
  template: solana
---

Is there a way to have images in the column-margin not appear when viewed on mobile? Or can they at least be moved to the very end of the page, rather than moving in front of the text when viewed on mobile?

Solution

  • 1 Change your page1.qmd to:

    ---
title: "Page1"
format:
  html:
    css: styles.css
---
## Header    
::: column-margin
![](images/image_1.JPG)
:::    
*Text text text text    
*Text text text text    
*Text    
![](images/image_2.jpg){fig-align="left"}

    2 Open the style.css in your project folder:

    out1

    and paste the following css:

    /* css styles */
@media screen and (max-width: 767px) {
    .column-margin {
      display: none !important;
    }
  }

    Result The sidebar picture (image_1) will be omitted on mobile:

    out

    Sidabar Image below

    Alternatively you could put the sidebar image below the normal content using this css:

    @media screen and (max-width: 767px) {
  .column-margin {
    position: relative !important;
    float: none !important;
    margin: 1em 0 !important;
    width: 100% !important;
  }
}

    Result out3

    PS: I used pepe as both images 1 & 2, since I don't have your example pictures.