Blockquote not responsive on mobile

[ezrantn]

Problem

I have a problem where I want to display code within a blockquote in one of my blog posts.

It works fine in desktop mode, but when I switch to mobile mode, it's not responsive.

Desktop mode:

Mobile mode:

As you can see, in mobile mode, the code moves outside of the blockquote.

Mobile mode was tested on iPhone 12/13 Mini using Chrome DevTools.

Code

Here is what my markdown looks like:

```go
func processAge(age int) error {
    if age < 0 {
        return fmt.Errorf("age cannot be negative")
    }
    if age < 18 {
        return fmt.Errorf("age must be at least 18")
    }
    if age > 100 {
        return fmt.Errorf("age cannot be greater than 100")
    }

    // Valid age range, process further
    // More processing here...
    fmt.Println("Age is valid and processed.")
    return nil
}
```

Here is my front-matter:

+++
title = "Early Return Pattern"
date = 2024-12-31T00:00:00+06:30
authors = ["Ezra Natanael"]
sort_by = "update_date"
page_template = "blogpage.html"
+++

Here is my config.toml:

# The URL the site will be built for
base_url = "https://ezrantn.github.io"
theme = "zluinav"

# Whether to automatically compile all Sass files in the sass directory
compile_sass = true

# Whether to build a search index to be used later on by a JavaScript library
build_search_index = true

[markdown]
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true

[extra]
# The language search path
tr_path = "langs"

[extra.search]
enable = true
default_enable = true
format = "pagefind"

[[extra.menus.main]]
name = "Home"
url = "/.l./"
key = "h"
id = "nav1"
[[extra.menus.main]]
name = "Blog"
url = "/.l./blog"
id = "nav2"

Goals

The blockquote in mobile mode should not be out of alignment with the grid.

---

Am I missing something here? Is there any tweak I need to make?

Is there anything else you need from me?

Thanks in advance, Harry.

[harrymkt]

Hello.

I think this has to do with CSS code style, not the direct JS or HTML codeline.

As you might have noticed in the README about my blindness, well, the thing goes here. Do to that, I'm not good at CSS code style. Maybe you could implement using CSS in the static/css/theme.css file and possibly create a pull request to that change? You can also modify other code files if you believe they also are causing the issue.

[francoposa]

@ezrantn I believe what you want is overflow: auto - this creates the scrollbars only if needed. First it will attempt to line break, which will work as long as there are word breaks and the code is not in <pre> element.

On my Hugo site I have it on p, blockquote, and pre elements, if they are descendants of the main page content container class (in my case just .content).
You can see how it looks in the code blocks here - several of those are wide enough that they create scrollbars on desktop too.

.content p, .content blockquote, .content pre{
  overflow: auto;
}

Would have to poke around to see where the correct place to put it is for this theme.