0

I use jekyll to generate my blog, and there is the code:

##  Skills

### **Familiar with**
<img align="left" alt="python" height="35px" style="margin:0px 4px" src="/assets/img/skills/python.png" />
<img align="left" alt="anaconda" height="35px" style="margin:0px 4px" src="/assets/img/skills/anaconda.png" />
<img align="left" alt="bash" height="35px" style="margin:0px 4px" src="/assets/img/skills/bash.png" />
<img align="left" alt="numpy" height="35px" style="margin:0px 4px" src="/assets/img/skills/numpy.png" />
<img align="left" alt="pytorch" height="35px" style="margin:0px 4px" src="/assets/img/skills/pytorch.png" />
<img align="left" alt="git" height="35px" style="margin:0px 4px" src="/assets/img/skills/git.png" />
<img align="left" alt="c" height="35px" style="margin:0px 4px" src="/assets/img/skills/c.webp" />
<img align="left" alt="github" height="35px" style="margin:0px 4px" src="/assets/img/skills/github.svg" />
<img align="left" alt="vscode" height="35px" style="margin:0px 4px" src="/assets/img/skills/vscode.png" />
<br>


### **Knowing**
<img align="left" alt="pycharm" height="35px" style="margin:0px 4px" src="/assets/img/skills/pycharm.png" />
<img align="left" alt="vim" height="35px" style="margin:0px 4px" src="/assets/img/skills/vim.png" />
<img align="left" alt="pandas" height="35px" style="margin:0px 4px" src="/assets/img/skills/pandas.png" />
<img align="left" alt="matlab" height="35px" style="margin:0px 4px" src="/assets/img/skills/matlab.png" />
<img align="left" alt="blogdown" height="35px" style="margin:0px 4px" src="/assets/img/skills/blogdown.png" />
<img align="left" alt="RStudio" height="35px" style="margin:0px 4px" src="/assets/img/skills/rstudio.png" />
<img align="left" alt="R" height="35px" style="margin:0px 4px" src="/assets/img/skills/r.png" />
<img align="left" alt="opencv" height="35px" style="margin:0px 4px" src="/assets/img/skills/opencv.png" />
<img align="left" alt="cmake" height="35px" style="margin:0px 4px" src="/assets/img/skills/cmake.webp" />
<img align="left" alt="linux" height="35px" style="margin:0px 4px" src="/assets/img/skills/linux.png" />
<img align="left" alt="Ubuntu" height="35px" style="margin:0px 4px" src="/assets/img/skills/ubuntu.png" /> 
<br>

The result will be good in my PC view like that: enter image description here

But it don't work well in mobile view, like that:

enter image description here

I want the view that after the last icon there will be a newline.

Can anyone help me out? Thanks a lot

PinkR1ver
  • 402
  • 1
  • 4
  • 13
  • 2
    What, exactly, _should_ it look like on mobile? It seems to be wrapping to fit in the narrower window just fine. – Ryan M Apr 28 '22 at 21:19
  • @RyanM Yeah, right, I want to make it wrap to fit well. After the last icon and then newline – PinkR1ver Apr 29 '22 at 03:36

1 Answers1

1

This is a css question, not a jekyll or html question, perhaps you'd have best luck tagging css. To answer your question, try wrapping your sets of images around a div such as:

<div style="display: flex; white-space:nowrap; overflow:auto; ">
<img...
<img...
</div>

Reference: How to make a DIV not wrap?

Of course the best course of action would be to specify a class to the div tag and put the style in your CSS file.

andrea m.
  • 668
  • 7
  • 15