Explore all Collaboration open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Collaboration

excalidraw

v0.11.0 (2022-02-17)

flarum

v1.2.0

element-web

v1.10.11-rc.1

yjs

GitLab FOSS

GitLab 14.0

Popular Libraries in Collaboration

discourse

by discourse doticonrubydoticon

star image 35516 doticonNOASSERTION

A platform for community discussion. Free, open, simple.

excalidraw

by excalidraw doticontypescriptdoticon

star image 28761 doticonMIT

Virtual whiteboard for sketching hand-drawn like diagrams

forem

by forem doticonrubydoticon

star image 18980 doticonAGPL-3.0

For empowering community ๐ŸŒฑ

flarum

by flarum doticonphpdoticon

star image 12292 doticonMIT

Simple forum software for building great communities.

community

by kubernetes doticonjupyter notebookdoticon

star image 8611 doticonApache-2.0

Kubernetes community content

element-web

by vector-im doticontypescriptdoticon

star image 8169 doticonApache-2.0

A glossy Matrix collaboration client for the web.

yjs

by yjs doticonjavascriptdoticon

star image 7137 doticonNOASSERTION

Shared data types for building collaborative software

GitLab FOSS

by gitlab-org doticonrubydoticon

star image 6599 doticon

GitLab FOSS is a read-only mirror of GitLab, with all proprietary code removed. This project was previously used to host GitLab Community Edition, but all development has now moved to https://gitlab.com/gitlab-org/gitlab.

humhub

by humhub doticonphpdoticon

star image 5671 doticonNOASSERTION

HumHub is an Open Source Enterprise Social Network. Easy to install, intuitive to use and extendable with countless freely available modules.

Trending New libraries in Collaboration

excalidraw

by excalidraw doticontypescriptdoticon

star image 28761 doticonMIT

Virtual whiteboard for sketching hand-drawn like diagrams

Twake

by linagora doticontypescriptdoticon

star image 1351 doticonNOASSERTION

Twake is a secure open source collaboration platform to improve organizational productivity.

Twake

by Twake doticonjavascriptdoticon

star image 846 doticonNOASSERTION

Twake is a secure open source collaboration platform to improve organizational productivity.

Twake

by TwakeApp doticonjavascriptdoticon

star image 736 doticonNOASSERTION

Twake is a collaborative platform which improves teamwork

casnode

by casbin doticongodoticon

star image 676 doticonApache-2.0

An open-source forum (BBS) software developed by Go and React, QQ group: 555019739

forum-java

by Qbian61 doticonjavadoticon

star image 535 doticonAGPL-3.0

ไธ€ๆฌพ็”จ Java๏ผˆspring boot๏ผ‰ ๅฎž็Žฐ็š„็ŽฐไปฃๅŒ–็คพๅŒบ๏ผˆ่ฎบๅ›/้—ฎ็ญ”/BBS/็คพไบค็ฝ‘็ปœ/ๅšๅฎข๏ผ‰็ณป็ปŸๅนณๅฐใ€‚A modern community (forum/Q&A/BBS/SNS/blog) system platform implemented in Java๏ผˆspring boot๏ผ‰.

vas3k.club

by vas3k doticonpythondoticon

star image 481 doticonMIT

No bullshit IT community with private membership

TheBoard

by toger5 doticonjavascriptdoticon

star image 351 doticonMIT

A collaborative Whiteboard powered by the [matrix] protocol and infrastucture.

webextensions

by w3c doticonhtmldoticon

star image 334 doticonNOASSERTION

Charter and administrivia for the WebExtensions Community Group (WECG)

Top Authors in Collaboration

1

FriendsOfFlarum

15 Libraries

star icon192

2

w3c

14 Libraries

star icon658

3

mozilla

5 Libraries

star icon797

4

microsoftarchive

4 Libraries

star icon117

5

ReFlar

4 Libraries

star icon41

6

nodeschool

4 Libraries

star icon168

7

vanilla

4 Libraries

star icon2553

8

larksuite

4 Libraries

star icon124

9

phpbb

4 Libraries

star icon1528

10

fluxbb

4 Libraries

star icon562

1

15 Libraries

star icon192

2

14 Libraries

star icon658

3

5 Libraries

star icon797

4

4 Libraries

star icon117

5

4 Libraries

star icon41

6

4 Libraries

star icon168

7

4 Libraries

star icon2553

8

4 Libraries

star icon124

9

4 Libraries

star icon1528

10

4 Libraries

star icon562

Trending Kits in Collaboration

No Trending Kits are available at this moment for Collaboration

Trending Discussions on Collaboration

I can't get my <img> tags to center inside of my grid

Counting repeated pairs in a list

As seen in the image, create two responsive DIVs with space between them

Django mod_wsgi Apache Server, ModuleNotFoundError: No Module Named Django

How to return different format of records from a single PL/pgSQL function?

Remove position absolute in media query

Incorrect images path in production build - Vue.js

Problem accessing prop to change color of button conditionally

user table not created on django deployment but superuser created on heroku bash

Find the categories that frequently occur together based on another column

QUESTION

I can't get my <img> tags to center inside of my grid

Asked 2022-Mar-29 at 04:59

I'm attempting to code my first website from scratch and I have found myself stuck on this problem for the last day. I am trying to center the logos for my mobile view. I have them placed correctly in my @media tag and they are displaying inside the grid however after countless tries I cannot get them to center inside of there grid columns. I do apologise if any of my code is messy.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359

I have done plenty of googling and from my understanding this shouldn't be a hard fix, I can only assume I have something overriding my code stopping me from centering my images.

ANSWER

Answered 2022-Mar-28 at 23:57
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362

will do it.

Another option:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365

Note: you might not realise it, but you posted everything except the images, because they're relative, on your system. You should have replaced the src's with some random image urls or some image placeholders (e.g: https://via.placeholder.com/150)


Working example:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365* {
366  box-sizing: border-box;
367  margin: 0;
368  padding: 0;
369}
370
371body {
372  background-color: black;
373}
374
375.company-logos {
376  display: flex;
377  flex-wrap: wrap;
378  flex-basis: 100%;
379  padding: 2% 6%;
380  justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384  .company-logos {
385    display: grid;
386    grid-template-columns: repeat(3, 1fr);
387    gap: 1rem;
388  }
389}
390
391@media (max-width: 800px) {
392  .company-logos {
393    grid-template-columns: repeat(2, 1fr);
394  }
395}
396
397.company-logos img {
398  justify-self: center;
399}
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365* {
366  box-sizing: border-box;
367  margin: 0;
368  padding: 0;
369}
370
371body {
372  background-color: black;
373}
374
375.company-logos {
376  display: flex;
377  flex-wrap: wrap;
378  flex-basis: 100%;
379  padding: 2% 6%;
380  justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384  .company-logos {
385    display: grid;
386    grid-template-columns: repeat(3, 1fr);
387    gap: 1rem;
388  }
389}
390
391@media (max-width: 800px) {
392  .company-logos {
393    grid-template-columns: repeat(2, 1fr);
394  }
395}
396
397.company-logos img {
398  justify-self: center;
399}    <section class="logos">
400        <div class="company-logos">
401            <img src="https://via.placeholder.com/150" alt="Walmart logo" class="walmart-logo">
402            <img src="https://via.placeholder.com/150" alt="JP Morgan logo">
403            <img src="https://via.placeholder.com/150" alt="Visa logo">
404            <img src="https://via.placeholder.com/150" alt="Tinder logo">
405            <img src="https://via.placeholder.com/150" alt="Samsung logo">
406            <img src="https://via.placeholder.com/150" alt="Verizon logo">
407        </div>
408    </section>

Note: I removed all code irrelevant for question being asked.

Source https://stackoverflow.com/questions/71654750

QUESTION

Counting repeated pairs in a list

Asked 2022-Feb-15 at 03:11

I have an assignment that has a data mining element. I need to find which authors collaborate the most across several publication webpages.

I've scraped the webpages and compiled the author text into a list.

My current output looks like this:

1for author in list:
2   print(author)
3
4##output :
5['Author 1', 'Author 2', 'Author 3']
6['Author 2', 'Author 4', 'Author 1']
7['Author 1', 'Author 5', 'Author 6', 'Author 7', 'Author 4']
8

etc for ~100 more rows.

My idea is, for in each section of the list, to produce another list that contains each of the unique pairs in that list. E.g. the third demo row would give 'Author 1 + Author 5', 'Author 1 + Author 6', 'Author 1 + Author 7', 'Author 1 + Author 4', 'Author 5 + Author 6', 'Author 5 + Author 7', 'Author 5 + Author 4', 'Author 6 + Author 7', 'Author 6 + Author 4', 'Author 7 + Author 4'. Then I'd append these pairs lists to one large list and put it through a counter to see which pairs came up the most.

The problem is I'm just not sure how to actually implement that pair matcher, so if anyone has any pointers that would be great. I'm sure it can't be that complicated an answer, but I've been unable to find it. Alternative ideas on how to measure collaboration would be good too.

ANSWER

Answered 2022-Feb-14 at 21:36

You could use a dictionary where the pair is the key and the number how often it occurs is the value. You'll need to make sure that you always generate the same key for (Author1,Author2) and (Author2, Author1) but you could choose alphabetic ordering for dealing with that.

Then you simply increment the number stored for the pair whenever you encounter it.

Source https://stackoverflow.com/questions/71118511

QUESTION

As seen in the image, create two responsive DIVs with space between them

Asked 2022-Feb-10 at 22:15

To further understand my demand, click on this link and look at the image.

I'm working on a codewell challenge and I'm stuck on this portion. I can't make an even space between them, and the images are overlapping.

1.website {
2  display: flex;
3  justify-content: space-between;
4}
5
6.arrow {
7  display: inline-block;
8  width: 1rem;
9}
1.website {
2  display: flex;
3  justify-content: space-between;
4}
5
6.arrow {
7  display: inline-block;
8  width: 1rem;
9}<div class="website">
10  <div class="spense">
11    <img id="spense" src="./Assets/Spense.png" alt="spense">
12    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14  </div>
15  <div class="yelp">
16    <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19  </div>
20</div>

ANSWER

Answered 2022-Feb-09 at 13:09

You can use width property on each child inside flex container.

1.website {
2  display: flex;
3  justify-content: space-between;
4}
5
6.arrow {
7  display: inline-block;
8  width: 1rem;
9}<div class="website">
10  <div class="spense">
11    <img id="spense" src="./Assets/Spense.png" alt="spense">
12    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14  </div>
15  <div class="yelp">
16    <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19  </div>
20</div>.website {
21  display: flex;
22  justify-content: space-between;
23}
24
25.spense, .yelp{
26  width:40%;
27}
28.arrow {
29  display: inline-block;
30  width: 1rem;
31}
32.image{
33width:100%;
34object-fit:cover;
35}
1.website {
2  display: flex;
3  justify-content: space-between;
4}
5
6.arrow {
7  display: inline-block;
8  width: 1rem;
9}<div class="website">
10  <div class="spense">
11    <img id="spense" src="./Assets/Spense.png" alt="spense">
12    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14  </div>
15  <div class="yelp">
16    <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19  </div>
20</div>.website {
21  display: flex;
22  justify-content: space-between;
23}
24
25.spense, .yelp{
26  width:40%;
27}
28.arrow {
29  display: inline-block;
30  width: 1rem;
31}
32.image{
33width:100%;
34object-fit:cover;
35}<div class="website">
36  <div class="spense">
37    <img class="image" id="spense" src="https://via.placeholder.com/350
38
39C/O https://placeholder.com/" alt="spense">
40    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
41    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
42  </div>
43  <div class="yelp">
44    <img class="image" id="yelp" src="https://via.placeholder.com/350
45
46C/O https://placeholder.com/" alt="YelpCamp">
47    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
48    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
49  </div>

Source https://stackoverflow.com/questions/71045875

QUESTION

Django mod_wsgi Apache Server, ModuleNotFoundError: No Module Named Django

Asked 2022-Feb-09 at 21:35

I read ton of articles, but still can't figure out what I'm missing. I'm running a django website from virtualenv. Here's my config file. The website address is replaced by <domain.com>, can't use that here.

Config

1&lt;VirtualHost *:80&gt;
2    
3        ServerAdmin sidharth@collaboration-management
4        ServerName &lt;domain.com&gt;
5        ServerAlias &lt;domain.com&gt;
6        DocumentRoot /home/sidharth/Downloads/gmcweb
7
8        ErrorLog ${APACHE_LOG_DIR}/error.log
9        CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11        Alias /static /home/sidharth/Downloads/gmcweb/static
12
13        &lt;Directory /home/sidharth/Downloads/gmcweb/static&gt;
14                Require all granted
15        &lt;/Directory&gt;
16
17        &lt;Directory /home/sidharth/Downloads/gmcweb/gmcweb&gt;
18                &lt;Files wsgi.py&gt;
19                        Require all granted
20                &lt;/Files&gt;
21        &lt;/Directory&gt;
22
23
24        WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25        WSGIProcessGroup gmcweb
26        WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27&lt;/VirtualHost&gt;
28

Here's my WSGI.py file, didn't change anything never had to earlier

1&lt;VirtualHost *:80&gt;
2    
3        ServerAdmin sidharth@collaboration-management
4        ServerName &lt;domain.com&gt;
5        ServerAlias &lt;domain.com&gt;
6        DocumentRoot /home/sidharth/Downloads/gmcweb
7
8        ErrorLog ${APACHE_LOG_DIR}/error.log
9        CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11        Alias /static /home/sidharth/Downloads/gmcweb/static
12
13        &lt;Directory /home/sidharth/Downloads/gmcweb/static&gt;
14                Require all granted
15        &lt;/Directory&gt;
16
17        &lt;Directory /home/sidharth/Downloads/gmcweb/gmcweb&gt;
18                &lt;Files wsgi.py&gt;
19                        Require all granted
20                &lt;/Files&gt;
21        &lt;/Directory&gt;
22
23
24        WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25        WSGIProcessGroup gmcweb
26        WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27&lt;/VirtualHost&gt;
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35

Python Versions

My virtualenv python version is 3.9.5 Default Google VM python version is 3.6.9

Python Installed Libraries

1&lt;VirtualHost *:80&gt;
2    
3        ServerAdmin sidharth@collaboration-management
4        ServerName &lt;domain.com&gt;
5        ServerAlias &lt;domain.com&gt;
6        DocumentRoot /home/sidharth/Downloads/gmcweb
7
8        ErrorLog ${APACHE_LOG_DIR}/error.log
9        CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11        Alias /static /home/sidharth/Downloads/gmcweb/static
12
13        &lt;Directory /home/sidharth/Downloads/gmcweb/static&gt;
14                Require all granted
15        &lt;/Directory&gt;
16
17        &lt;Directory /home/sidharth/Downloads/gmcweb/gmcweb&gt;
18                &lt;Files wsgi.py&gt;
19                        Require all granted
20                &lt;/Files&gt;
21        &lt;/Directory&gt;
22
23
24        WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25        WSGIProcessGroup gmcweb
26        WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27&lt;/VirtualHost&gt;
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package                  Version
36------------------------ ---------
37asgiref                  3.4.0
38attrs                    21.2.0
39autopep8                 1.5.7
40beautifulsoup4           4.9.3
41certifi                  2021.5.30
42cffi                     1.14.5
43chardet                  4.0.0
44cryptography             3.4.7
45defusedxml               0.7.1
46Django                   3.2.4
47django-allauth           0.44.0
48django-livereload-server 0.3.2
49idna                     2.10
50jsonschema               3.2.0
51oauthlib                 3.1.1
52pip                      21.2.3
53pycodestyle              2.7.0
54pycparser                2.20
55PyJWT                    2.1.0
56pyrsistent               0.18.0
57python3-openid           3.2.0
58pytz                     2021.1
59requests                 2.25.1
60requests-oauthlib        1.3.0
61setuptools               57.4.0
62six                      1.16.0
63soupsieve                2.2.1
64sqlparse                 0.4.1
65toml                     0.10.2
66tornado                  6.1
67urllib3                  1.26.6
68

I installed apache modwsgi as well sudo apt-get install python3-pip apache2 libapache2-mod-wsgi-py3

Error Log File

1&lt;VirtualHost *:80&gt;
2    
3        ServerAdmin sidharth@collaboration-management
4        ServerName &lt;domain.com&gt;
5        ServerAlias &lt;domain.com&gt;
6        DocumentRoot /home/sidharth/Downloads/gmcweb
7
8        ErrorLog ${APACHE_LOG_DIR}/error.log
9        CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11        Alias /static /home/sidharth/Downloads/gmcweb/static
12
13        &lt;Directory /home/sidharth/Downloads/gmcweb/static&gt;
14                Require all granted
15        &lt;/Directory&gt;
16
17        &lt;Directory /home/sidharth/Downloads/gmcweb/gmcweb&gt;
18                &lt;Files wsgi.py&gt;
19                        Require all granted
20                &lt;/Files&gt;
21        &lt;/Directory&gt;
22
23
24        WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25        WSGIProcessGroup gmcweb
26        WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27&lt;/VirtualHost&gt;
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package                  Version
36------------------------ ---------
37asgiref                  3.4.0
38attrs                    21.2.0
39autopep8                 1.5.7
40beautifulsoup4           4.9.3
41certifi                  2021.5.30
42cffi                     1.14.5
43chardet                  4.0.0
44cryptography             3.4.7
45defusedxml               0.7.1
46Django                   3.2.4
47django-allauth           0.44.0
48django-livereload-server 0.3.2
49idna                     2.10
50jsonschema               3.2.0
51oauthlib                 3.1.1
52pip                      21.2.3
53pycodestyle              2.7.0
54pycparser                2.20
55PyJWT                    2.1.0
56pyrsistent               0.18.0
57python3-openid           3.2.0
58pytz                     2021.1
59requests                 2.25.1
60requests-oauthlib        1.3.0
61setuptools               57.4.0
62six                      1.16.0
63soupsieve                2.2.1
64sqlparse                 0.4.1
65toml                     0.10.2
66tornado                  6.1
67urllib3                  1.26.6
68[Thu Sep 23 15:05:06.554545 2021] [mpm_event:notice] [pid 32077:tid 140392561593280] AH00489: Apache/2.4.29 (Ubuntu) mod_wsgi/4.5.17 Python/3.6 configured -- resuming normal operations
69[Thu Sep 23 15:05:06.554594 2021] [core:notice] [pid 32077:tid 140392561593280] AH00094: Command line: '/usr/sbin/apache2'
70[Thu Sep 23 15:05:19.081581 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
71[Thu Sep 23 15:05:19.081638 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
72[Thu Sep 23 15:05:19.081828 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] Traceback (most recent call last):
73[Thu Sep 23 15:05:19.081849 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604]   File &quot;/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py&quot;, line 12, in &lt;module&gt;
74[Thu Sep 23 15:05:19.081853 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604]     from django.core.wsgi import get_wsgi_application
75[Thu Sep 23 15:05:19.081867 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] ModuleNotFoundError: No module named 'django'
76[Thu Sep 23 15:05:32.244779 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
77[Thu Sep 23 15:05:32.244845 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
78[Thu Sep 23 15:05:32.244924 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] Traceback (most recent call last):
79[Thu Sep 23 15:05:32.244946 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916]   File &quot;/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py&quot;, line 12, in &lt;module&gt;
80[Thu Sep 23 15:05:32.244951 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916]     from django.core.wsgi import get_wsgi_application
81[Thu Sep 23 15:05:32.244966 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] ModuleNotFoundError: No module named 'django'
82

ANSWER

Answered 2021-Sep-23 at 15:28

The error says that either you haven't got Django installed or didn't activate the virtual environment in which the Django was installed. Make sure that you check the list of installed packages and find Django in there, via:

1&lt;VirtualHost *:80&gt;
2    
3        ServerAdmin sidharth@collaboration-management
4        ServerName &lt;domain.com&gt;
5        ServerAlias &lt;domain.com&gt;
6        DocumentRoot /home/sidharth/Downloads/gmcweb
7
8        ErrorLog ${APACHE_LOG_DIR}/error.log
9        CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11        Alias /static /home/sidharth/Downloads/gmcweb/static
12
13        &lt;Directory /home/sidharth/Downloads/gmcweb/static&gt;
14                Require all granted
15        &lt;/Directory&gt;
16
17        &lt;Directory /home/sidharth/Downloads/gmcweb/gmcweb&gt;
18                &lt;Files wsgi.py&gt;
19                        Require all granted
20                &lt;/Files&gt;
21        &lt;/Directory&gt;
22
23
24        WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25        WSGIProcessGroup gmcweb
26        WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27&lt;/VirtualHost&gt;
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package                  Version
36------------------------ ---------
37asgiref                  3.4.0
38attrs                    21.2.0
39autopep8                 1.5.7
40beautifulsoup4           4.9.3
41certifi                  2021.5.30
42cffi                     1.14.5
43chardet                  4.0.0
44cryptography             3.4.7
45defusedxml               0.7.1
46Django                   3.2.4
47django-allauth           0.44.0
48django-livereload-server 0.3.2
49idna                     2.10
50jsonschema               3.2.0
51oauthlib                 3.1.1
52pip                      21.2.3
53pycodestyle              2.7.0
54pycparser                2.20
55PyJWT                    2.1.0
56pyrsistent               0.18.0
57python3-openid           3.2.0
58pytz                     2021.1
59requests                 2.25.1
60requests-oauthlib        1.3.0
61setuptools               57.4.0
62six                      1.16.0
63soupsieve                2.2.1
64sqlparse                 0.4.1
65toml                     0.10.2
66tornado                  6.1
67urllib3                  1.26.6
68[Thu Sep 23 15:05:06.554545 2021] [mpm_event:notice] [pid 32077:tid 140392561593280] AH00489: Apache/2.4.29 (Ubuntu) mod_wsgi/4.5.17 Python/3.6 configured -- resuming normal operations
69[Thu Sep 23 15:05:06.554594 2021] [core:notice] [pid 32077:tid 140392561593280] AH00094: Command line: '/usr/sbin/apache2'
70[Thu Sep 23 15:05:19.081581 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
71[Thu Sep 23 15:05:19.081638 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
72[Thu Sep 23 15:05:19.081828 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] Traceback (most recent call last):
73[Thu Sep 23 15:05:19.081849 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604]   File &quot;/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py&quot;, line 12, in &lt;module&gt;
74[Thu Sep 23 15:05:19.081853 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604]     from django.core.wsgi import get_wsgi_application
75[Thu Sep 23 15:05:19.081867 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] ModuleNotFoundError: No module named 'django'
76[Thu Sep 23 15:05:32.244779 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
77[Thu Sep 23 15:05:32.244845 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
78[Thu Sep 23 15:05:32.244924 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] Traceback (most recent call last):
79[Thu Sep 23 15:05:32.244946 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916]   File &quot;/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py&quot;, line 12, in &lt;module&gt;
80[Thu Sep 23 15:05:32.244951 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916]     from django.core.wsgi import get_wsgi_application
81[Thu Sep 23 15:05:32.244966 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] ModuleNotFoundError: No module named 'django'
82$pip list
83

Source https://stackoverflow.com/questions/69302698

QUESTION

How to return different format of records from a single PL/pgSQL function?

Asked 2022-Jan-30 at 02:41

I am a frontend developer but I started to write backend stuff. I have spent quite some amount of time trying to figure out how to solve this. I really need some help.

Here are the simplified definitions and relations of two tables:

Relationship between tables

1CREATE TABLE IF NOT EXISTS items (
2    item_id       uuid          NOT NULL DEFAULT gen_random_uuid() ,
3    parent_id     uuid                   DEFAULT NULL              ,   
4    parent_table  parent_tables NOT NULL
5);
6
1CREATE TABLE IF NOT EXISTS items (
2    item_id       uuid          NOT NULL DEFAULT gen_random_uuid() ,
3    parent_id     uuid                   DEFAULT NULL              ,   
4    parent_table  parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7    collection_id uuid          NOT NULL DEFAULT gen_random_uuid() ,
8    parent_id     uuid                   DEFAULT NULL
9);
10

Our product is an online document collaboration tool, page can have nested pages.

I have a piece of PostgreSQL code for getting all of its ancestor records for given item_ids.

1CREATE TABLE IF NOT EXISTS items (
2    item_id       uuid          NOT NULL DEFAULT gen_random_uuid() ,
3    parent_id     uuid                   DEFAULT NULL              ,   
4    parent_table  parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7    collection_id uuid          NOT NULL DEFAULT gen_random_uuid() ,
8    parent_id     uuid                   DEFAULT NULL
9);
10WITH RECURSIVE ancestors AS (
11    SELECT *
12    FROM items
13    WHERE item_id in ( ${itemIds} )
14
15    UNION
16
17    SELECT i.*
18    FROM items i
19    INNER JOIN ancestors a ON a.parent_id = i.item_id
20)
21SELECT * FROM ancestors
22

It works fine for nesting regular pages, But if I am going to support nesting collection pages, which means some items' parent_id might refer to "collection" table's collection_id, this code will not work anymore. According to my limited experience, I don't think pure SQL code can solve it. I think writing a PL/pgSQL function might be a solution, but I need to get all ancestor records to given itemIds, which means returning a mix of items and collections records.

So how to return different format of records from a single PL/pgSQL function? I did some research but haven't found any example.

ANSWER

Answered 2022-Jan-30 at 02:36

You can make it work by returning a superset as row: comprised of item and collection. One of both will be NULL for each result row.

1CREATE TABLE IF NOT EXISTS items (
2    item_id       uuid          NOT NULL DEFAULT gen_random_uuid() ,
3    parent_id     uuid                   DEFAULT NULL              ,   
4    parent_table  parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7    collection_id uuid          NOT NULL DEFAULT gen_random_uuid() ,
8    parent_id     uuid                   DEFAULT NULL
9);
10WITH RECURSIVE ancestors AS (
11    SELECT *
12    FROM items
13    WHERE item_id in ( ${itemIds} )
14
15    UNION
16
17    SELECT i.*
18    FROM items i
19    INNER JOIN ancestors a ON a.parent_id = i.item_id
20)
21SELECT * FROM ancestors
22WITH RECURSIVE ancestors AS (
23   SELECT 0 AS lvl, i.parent_id, i.parent_table, i AS _item, NULL::collections AS _coll
24   FROM   items i
25   WHERE  item_id IN ( ${itemIds} )
26
27   UNION ALL -- !
28   SELECT lvl + 1, COALESCE(i.parent_id, c.parent_id), COALESCE(i.parent_table, 'i'), i, c
29   FROM   ancestors        a 
30   LEFT   JOIN items       i ON a.parent_table = 'i' AND i.item_id = a.parent_id
31   LEFT   JOIN collections c ON a.parent_table = 'c' AND c.collection_id = a.parent_id
32   WHERE  a.parent_id IS NOT NULL
33   )
34SELECT lvl, _item, _coll
35FROM   ancestors
36--     ORDER BY ?
37

db<>fiddle here

UNION ALL, not UNION.

Assuming a collection's parent is always an item, while an item can go either way.

We need LEFT JOIN on both potential parent tables to stay in the race.

I added an optional lvl to keep track of the level of hierarchy.

About decomposing row types:

Source https://stackoverflow.com/questions/70882767

QUESTION

Remove position absolute in media query

Asked 2022-Jan-28 at 14:46

I am using display: flex for a container (.zone-container) to position the children. However, I am applying position: absolute to one of the children (#camp-zone) in order to place it on top of the other children. I want to remove the position: absolute from the child element in the media query and apply the same style for all the children (except for background-color). I have tried to set position to static in the media query for both the element that has position: absolute and the container that has position: relative but the child element continues to have different style compared to the other children. How do I unset the specific styling in the media query?

1.header {
2  background-color: navy;
3  min-height: 7vh; 
4  display: grid;
5}
6
7.header h2 {
8  color: white;
9  text-align: center;
10  font-size: 45px;
11  font-weight: inherit;
12  font-family: arial;
13}
14
15.game-area {
16  display: flex;
17  justify-content: flex-start;
18  width: 100%;
19  background-color: navy;
20  height: 100%;
21  min-height: 1000px;
22}
23
24.activity-zone-container {
25  display: flex;
26}
27
28.zone-container {
29  display: flex;
30  flex-wrap: wrap;
31  max-width: 120vh;
32  position: relative;
33  max-height: 95vh;
34  margin: 0%;
35}
36
37.zone {
38  min-width: 32vh;
39  min-height: 27vh;
40  margin: 15px;
41  display: flex;
42  justify-content: center;
43  align-items: center;
44  width: 44%;
45  height: 33%;
46  max-height: 300px;
47}
48
49.zone p {
50  color: white;
51  text-align: center;
52  margin-bottom: 15px;
53  font-family: arial;
54}
55
56#concentration-zone {
57  background-color: orange;
58}
59#communication-zone {
60  background-color: yellow;
61}
62#communication-zone p {
63  color: black;
64}
65#collaboration-zone {
66  background-color: #3260a8;
67}
68#chill-out-zone {
69  background-color: pink;
70}
71#chill-out-zone p {
72  color: black;
73}
74#camp-zone {
75  justify-content: center;
76  background-color: green;
77  justify-self: center;
78  position: absolute;
79  z-index: 0;
80  bottom: 0;
81  right: 0;
82  width: 44%;
83  height: 33%;
84  min-width: 32vh;
85  min-height: 27vh;
86  margin-left: auto;
87  margin-right: auto;
88  margin-top: auto;
89  margin-bottom: auto;
90  left: 0;
91  top: 0;
92}
93.activity-container {
94  margin: 0;
95  max-width: 73vh;
96  display: flex;
97  flex-wrap: wrap;
98  width: 40%;
99}
100
101.activity {
102  background-color: #3260a8;
103  margin: 17px;
104  display: flex;
105  justify-content: center;
106  cursor: pointer;
107  width: 140px;
108  height: 87px;
109}
110.activity-concentration {
111  background-color: orange;
112  margin: 17px;
113  display: flex;
114  justify-content: center;
115  color: white;
116  width: 140px;
117  height: 87px;
118}
119.activity-communication {
120  background-color: yellow;
121  margin: 17px;
122  display: flex;
123  justify-content: center;
124  width: 140px;
125  height: 87px;
126}
127.activity-chill-out {
128  background-color: pink;
129  margin: 17px;
130  display: flex;
131  justify-content: center;
132  width: 140px;
133  height: 87px;
134}
135.activity-camp {
136  background-color: green;
137  margin: 17px;
138  display: flex;
139  justify-content: center;
140  color: white;
141  width: 140px;
142  height: 87px;
143}
144.activity p {
145  color: white;
146}
147
148@media (max-width: 768px)  {
149
150  .game-area {
151    min-height: 150vh;
152  }
153
154  .header h2 {
155    margin: 15px;
156    font-size: 30px;
157  }
158
159  .zone {
160    width: 220px;
161    height: 180px;
162  }
163
164  #camp-zone {
165    position: static;
166    width: unset;
167    height: unset;
168    margin-top: unset;
169    justify-content: unset;
170    justify-self: unset;
171    z-index: unset;
172    bottom: unset;
173    right: unset;
174    width: unset;
175    height: unset;
176    min-width: unset;
177    min-height: unset;
178    margin-left: unset;
179    margin-right: unset;
180    margin-bottom: unset;
181    left: unset;
182    top: unset;
183  }
184

1.header {
2  background-color: navy;
3  min-height: 7vh; 
4  display: grid;
5}
6
7.header h2 {
8  color: white;
9  text-align: center;
10  font-size: 45px;
11  font-weight: inherit;
12  font-family: arial;
13}
14
15.game-area {
16  display: flex;
17  justify-content: flex-start;
18  width: 100%;
19  background-color: navy;
20  height: 100%;
21  min-height: 1000px;
22}
23
24.activity-zone-container {
25  display: flex;
26}
27
28.zone-container {
29  display: flex;
30  flex-wrap: wrap;
31  max-width: 120vh;
32  position: relative;
33  max-height: 95vh;
34  margin: 0%;
35}
36
37.zone {
38  min-width: 32vh;
39  min-height: 27vh;
40  margin: 15px;
41  display: flex;
42  justify-content: center;
43  align-items: center;
44  width: 44%;
45  height: 33%;
46  max-height: 300px;
47}
48
49.zone p {
50  color: white;
51  text-align: center;
52  margin-bottom: 15px;
53  font-family: arial;
54}
55
56#concentration-zone {
57  background-color: orange;
58}
59#communication-zone {
60  background-color: yellow;
61}
62#communication-zone p {
63  color: black;
64}
65#collaboration-zone {
66  background-color: #3260a8;
67}
68#chill-out-zone {
69  background-color: pink;
70}
71#chill-out-zone p {
72  color: black;
73}
74#camp-zone {
75  justify-content: center;
76  background-color: green;
77  justify-self: center;
78  position: absolute;
79  z-index: 0;
80  bottom: 0;
81  right: 0;
82  width: 44%;
83  height: 33%;
84  min-width: 32vh;
85  min-height: 27vh;
86  margin-left: auto;
87  margin-right: auto;
88  margin-top: auto;
89  margin-bottom: auto;
90  left: 0;
91  top: 0;
92}
93.activity-container {
94  margin: 0;
95  max-width: 73vh;
96  display: flex;
97  flex-wrap: wrap;
98  width: 40%;
99}
100
101.activity {
102  background-color: #3260a8;
103  margin: 17px;
104  display: flex;
105  justify-content: center;
106  cursor: pointer;
107  width: 140px;
108  height: 87px;
109}
110.activity-concentration {
111  background-color: orange;
112  margin: 17px;
113  display: flex;
114  justify-content: center;
115  color: white;
116  width: 140px;
117  height: 87px;
118}
119.activity-communication {
120  background-color: yellow;
121  margin: 17px;
122  display: flex;
123  justify-content: center;
124  width: 140px;
125  height: 87px;
126}
127.activity-chill-out {
128  background-color: pink;
129  margin: 17px;
130  display: flex;
131  justify-content: center;
132  width: 140px;
133  height: 87px;
134}
135.activity-camp {
136  background-color: green;
137  margin: 17px;
138  display: flex;
139  justify-content: center;
140  color: white;
141  width: 140px;
142  height: 87px;
143}
144.activity p {
145  color: white;
146}
147
148@media (max-width: 768px)  {
149
150  .game-area {
151    min-height: 150vh;
152  }
153
154  .header h2 {
155    margin: 15px;
156    font-size: 30px;
157  }
158
159  .zone {
160    width: 220px;
161    height: 180px;
162  }
163
164  #camp-zone {
165    position: static;
166    width: unset;
167    height: unset;
168    margin-top: unset;
169    justify-content: unset;
170    justify-self: unset;
171    z-index: unset;
172    bottom: unset;
173    right: unset;
174    width: unset;
175    height: unset;
176    min-width: unset;
177    min-height: unset;
178    margin-left: unset;
179    margin-right: unset;
180    margin-bottom: unset;
181    left: unset;
182    top: unset;
183  }
184&lt;html lang
185&lt;body&gt;
186    &lt;div id="app"&gt;
187        &lt;section class="header"&gt;
188            &lt;h2&gt;Click on an activity box to see which area it belongs to&lt;/h2&gt;
189        &lt;/section&gt;
190        &lt;section class="game-area"&gt;
191            &lt;div class="activity-zone-container"&gt;
192                &lt;div class="zone-container"&gt;
193                    &lt;div class="zone" id="concentration-zone"&gt;
194                        &lt;p&gt;Concentration&lt;/p&gt;
195                    &lt;/div&gt;
196                    &lt;div class="zone" id="communication-zone"&gt;
197                        &lt;p&gt;Communication&lt;/p&gt;
198                    &lt;/div&gt;
199                    &lt;div class="zone" id="collaboration-zone"&gt;
200                        &lt;p&gt;Collaboration&lt;/p&gt;
201                    &lt;/div&gt;
202                    &lt;div class="zone" id="chill-out-zone"&gt;
203                        &lt;p&gt;Chill Out&lt;/p&gt;
204                    &lt;/div&gt;
205                    &lt;div class="zone" id="camp-zone"&gt;
206                        &lt;p&gt;Camp&lt;/p&gt;
207                    &lt;/div&gt;
208                &lt;/div&gt;
209                &lt;div class="activity-container"&gt;
210                    &lt;button class="activity" activitytype="concentration"&gt;
211                        &lt;p&gt;Code&lt;/p&gt;
212                    &lt;/button&gt;
213                    &lt;button class="activity" activitytype="communication"&gt;
214                        &lt;p&gt;Teams Meeting&lt;/p&gt;
215                    &lt;/button&gt;
216                    &lt;button class="activity" activitytype="camp"&gt;
217                        &lt;p&gt;Make a phone call&lt;/p&gt;
218                    &lt;/button&gt;
219                    &lt;button class="activity" activitytype="collaboration"&gt;
220                        &lt;p&gt;Work shops with colleagues&lt;/p&gt;
221                    &lt;/button&gt;
222                    &lt;button class="activity" activitytype="chillout"&gt;
223                        &lt;p&gt;Coffee break&lt;/p&gt;
224                    &lt;/button&gt;
225                    &lt;button class="activity" activitytype="collaboration"&gt;
226                        &lt;p&gt;Lively discussions/brainstorming&lt;/p&gt;
227                    &lt;/button&gt;
228                    &lt;button class="activity" activitytype="camp"&gt;
229                        &lt;p&gt;Long group work&lt;/p&gt;
230                    &lt;/button&gt;
231                    &lt;button class="activity" activitytype="collaboration"&gt;
232                        &lt;p&gt;Creative zone for problem solving&lt;/p&gt;
233                    &lt;/button&gt;
234                    &lt;button class="activity" activitytype="concentration"&gt;
235                        &lt;p&gt;Concentrate on task&lt;/p&gt;
236                    &lt;/button&gt;
237                    &lt;button class="activity" activitytype="communication"&gt;
238                        &lt;p&gt;Not bothered by phone calls/chatting&lt;/p&gt;
239                    &lt;/button&gt;
240                    &lt;button class="activity" activitytype="collaboration"&gt;
241                        &lt;p&gt;Collaboration &amp;amp; Planning&lt;/p&gt;
242                    &lt;/button&gt;
243                    &lt;button class="activity" activitytype="chillout"&gt;
244                        &lt;p&gt;Coffee break with groups&lt;/p&gt;
245                    &lt;/button&gt;
246                    &lt;button class="activity" activitytype="collaboration"&gt;
247                        &lt;p&gt;Prepare a presentation together&lt;/p&gt;
248                    &lt;/button&gt;
249                    &lt;button class="activity" activitytype="communication"&gt;
250                        &lt;p&gt;Think for yourself&lt;/p&gt;
251                    &lt;/button&gt;
252                    &lt;button class="activity" activitytype="collaboration"&gt;
253                        &lt;p&gt;Meeting with no sensitive info&lt;/p&gt;
254                    &lt;/button&gt;
255                    &lt;button class="activity" activitytype="collaboration"&gt;
256                        &lt;p&gt;Quick, spontaneous meetings&lt;/p&gt;
257                    &lt;/button&gt;
258                    &lt;button class="activity" activitytype="communication"&gt;
259                        &lt;p&gt;Have a chat without disturbance&lt;/p&gt;
260                    &lt;/button&gt;
261                    &lt;button class="activity" activitytype="camp"&gt;
262                        &lt;p&gt;Room for external/internal parties&lt;/p&gt;
263                    &lt;/button&gt;
264                    &lt;button class="activity" activitytype="communication"&gt;
265                        &lt;p&gt;Private dialogue&lt;/p&gt;
266                    &lt;/button&gt;
267                    &lt;button class="activity" activitytype="communication"&gt;
268                        &lt;p&gt;Read a contract in silence&lt;/p&gt;
269                    &lt;/button&gt;
270                    &lt;button class="activity" activitytype="concentration"&gt;
271                        &lt;p&gt;Individual work without disturbance&lt;/p&gt;
272                    &lt;/button&gt;
273                    &lt;button class="activity" activitytype="communication"&gt;
274                        &lt;p&gt;Check e-mails&lt;/p&gt;
275                    &lt;/button&gt;
276                    &lt;button class="activity" activitytype="concentration"&gt;
277                        &lt;p&gt;Calm &amp;amp; quiet work space&lt;/p&gt;
278                    &lt;/button&gt;
279                    &lt;button class="activity" activitytype="chillout"&gt;
280                        &lt;p&gt;Hangout with colleagues outside project&lt;/p&gt;
281                    &lt;/button&gt;
282                    &lt;button class="activity" activitytype="communication"&gt;
283                        &lt;p&gt;Plan work&lt;/p&gt;
284                    &lt;/button&gt;
285                    &lt;button class="activity" activitytype="communication"&gt;
286                        &lt;p&gt;Lead employees/team&lt;/p&gt;
287                    &lt;/button&gt;
288                    &lt;button class="activity" activitytype="concentration"&gt;
289                        &lt;p&gt;Analyze data&lt;/p&gt;
290                    &lt;/button&gt;
291                    &lt;button class="activity" activitytype="concentration"&gt;
292                        &lt;p&gt;Rest&lt;/p&gt;
293                    &lt;/button&gt;
294                    &lt;button class="activity" activitytype="chillout"&gt;
295                        &lt;p&gt;Chat with a colleague about weekend plans&lt;/p&gt;
296                    &lt;/button&gt;
297                    &lt;button class="activity" activitytype="collaboration"&gt;
298                        &lt;p&gt;Discuss solutions for challenges in projects&lt;/p&gt;
299                    &lt;/button&gt;
300                    &lt;button class="activity" activitytype="chillout"&gt;
301                        &lt;p&gt;Pause from work&lt;/p&gt;
302                    &lt;/button&gt;
303                    &lt;button class="activity" activitytype="camp"&gt;
304                        &lt;p&gt;Private room for team/project for a long time&lt;/p&gt;
305                    &lt;/button&gt;
306                    &lt;button class="activity" activitytype="chillout"&gt;
307                        &lt;p&gt;Coffee with colleagues&lt;/p&gt;
308                    &lt;/button&gt;
309                    &lt;button class="activity" activitytype="chillout"&gt;
310                        &lt;p&gt;Networking&lt;/p&gt;
311                    &lt;/button&gt;
312                &lt;/div&gt;
313            &lt;/div&gt;
314        &lt;/section&gt;
315    &lt;/div&gt;
316    &lt;script src="index.js" type="text/javascript"/&gt;
317    &lt;script src="/static/js/bundle.js"/&gt;
318    &lt;script src="/static/js/0.chunk.js"/&gt;
319    &lt;script src="/static/js/main.chunk.js"/&gt;
320&lt;/body&gt;
321&lt;/html&gt;

ANSWER

Answered 2022-Jan-28 at 14:46

Kindly change your CSS to this. The code in @media (min-width: 767px){} only applies to screens that are larger than 767px. Smaller screens (e.g. @media (max-width: 768px){}) will completely ignore it.

1.header {
2  background-color: navy;
3  min-height: 7vh; 
4  display: grid;
5}
6
7.header h2 {
8  color: white;
9  text-align: center;
10  font-size: 45px;
11  font-weight: inherit;
12  font-family: arial;
13}
14
15.game-area {
16  display: flex;
17  justify-content: flex-start;
18  width: 100%;
19  background-color: navy;
20  height: 100%;
21  min-height: 1000px;
22}
23
24.activity-zone-container {
25  display: flex;
26}
27
28.zone-container {
29  display: flex;
30  flex-wrap: wrap;
31  max-width: 120vh;
32  position: relative;
33  max-height: 95vh;
34  margin: 0%;
35}
36
37.zone {
38  min-width: 32vh;
39  min-height: 27vh;
40  margin: 15px;
41  display: flex;
42  justify-content: center;
43  align-items: center;
44  width: 44%;
45  height: 33%;
46  max-height: 300px;
47}
48
49.zone p {
50  color: white;
51  text-align: center;
52  margin-bottom: 15px;
53  font-family: arial;
54}
55
56#concentration-zone {
57  background-color: orange;
58}
59#communication-zone {
60  background-color: yellow;
61}
62#communication-zone p {
63  color: black;
64}
65#collaboration-zone {
66  background-color: #3260a8;
67}
68#chill-out-zone {
69  background-color: pink;
70}
71#chill-out-zone p {
72  color: black;
73}
74#camp-zone {
75  justify-content: center;
76  background-color: green;
77  justify-self: center;
78  position: absolute;
79  z-index: 0;
80  bottom: 0;
81  right: 0;
82  width: 44%;
83  height: 33%;
84  min-width: 32vh;
85  min-height: 27vh;
86  margin-left: auto;
87  margin-right: auto;
88  margin-top: auto;
89  margin-bottom: auto;
90  left: 0;
91  top: 0;
92}
93.activity-container {
94  margin: 0;
95  max-width: 73vh;
96  display: flex;
97  flex-wrap: wrap;
98  width: 40%;
99}
100
101.activity {
102  background-color: #3260a8;
103  margin: 17px;
104  display: flex;
105  justify-content: center;
106  cursor: pointer;
107  width: 140px;
108  height: 87px;
109}
110.activity-concentration {
111  background-color: orange;
112  margin: 17px;
113  display: flex;
114  justify-content: center;
115  color: white;
116  width: 140px;
117  height: 87px;
118}
119.activity-communication {
120  background-color: yellow;
121  margin: 17px;
122  display: flex;
123  justify-content: center;
124  width: 140px;
125  height: 87px;
126}
127.activity-chill-out {
128  background-color: pink;
129  margin: 17px;
130  display: flex;
131  justify-content: center;
132  width: 140px;
133  height: 87px;
134}
135.activity-camp {
136  background-color: green;
137  margin: 17px;
138  display: flex;
139  justify-content: center;
140  color: white;
141  width: 140px;
142  height: 87px;
143}
144.activity p {
145  color: white;
146}
147
148@media (max-width: 768px)  {
149
150  .game-area {
151    min-height: 150vh;
152  }
153
154  .header h2 {
155    margin: 15px;
156    font-size: 30px;
157  }
158
159  .zone {
160    width: 220px;
161    height: 180px;
162  }
163
164  #camp-zone {
165    position: static;
166    width: unset;
167    height: unset;
168    margin-top: unset;
169    justify-content: unset;
170    justify-self: unset;
171    z-index: unset;
172    bottom: unset;
173    right: unset;
174    width: unset;
175    height: unset;
176    min-width: unset;
177    min-height: unset;
178    margin-left: unset;
179    margin-right: unset;
180    margin-bottom: unset;
181    left: unset;
182    top: unset;
183  }
184&lt;html lang
185&lt;body&gt;
186    &lt;div id="app"&gt;
187        &lt;section class="header"&gt;
188            &lt;h2&gt;Click on an activity box to see which area it belongs to&lt;/h2&gt;
189        &lt;/section&gt;
190        &lt;section class="game-area"&gt;
191            &lt;div class="activity-zone-container"&gt;
192                &lt;div class="zone-container"&gt;
193                    &lt;div class="zone" id="concentration-zone"&gt;
194                        &lt;p&gt;Concentration&lt;/p&gt;
195                    &lt;/div&gt;
196                    &lt;div class="zone" id="communication-zone"&gt;
197                        &lt;p&gt;Communication&lt;/p&gt;
198                    &lt;/div&gt;
199                    &lt;div class="zone" id="collaboration-zone"&gt;
200                        &lt;p&gt;Collaboration&lt;/p&gt;
201                    &lt;/div&gt;
202                    &lt;div class="zone" id="chill-out-zone"&gt;
203                        &lt;p&gt;Chill Out&lt;/p&gt;
204                    &lt;/div&gt;
205                    &lt;div class="zone" id="camp-zone"&gt;
206                        &lt;p&gt;Camp&lt;/p&gt;
207                    &lt;/div&gt;
208                &lt;/div&gt;
209                &lt;div class="activity-container"&gt;
210                    &lt;button class="activity" activitytype="concentration"&gt;
211                        &lt;p&gt;Code&lt;/p&gt;
212                    &lt;/button&gt;
213                    &lt;button class="activity" activitytype="communication"&gt;
214                        &lt;p&gt;Teams Meeting&lt;/p&gt;
215                    &lt;/button&gt;
216                    &lt;button class="activity" activitytype="camp"&gt;
217                        &lt;p&gt;Make a phone call&lt;/p&gt;
218                    &lt;/button&gt;
219                    &lt;button class="activity" activitytype="collaboration"&gt;
220                        &lt;p&gt;Work shops with colleagues&lt;/p&gt;
221                    &lt;/button&gt;
222                    &lt;button class="activity" activitytype="chillout"&gt;
223                        &lt;p&gt;Coffee break&lt;/p&gt;
224                    &lt;/button&gt;
225                    &lt;button class="activity" activitytype="collaboration"&gt;
226                        &lt;p&gt;Lively discussions/brainstorming&lt;/p&gt;
227                    &lt;/button&gt;
228                    &lt;button class="activity" activitytype="camp"&gt;
229                        &lt;p&gt;Long group work&lt;/p&gt;
230                    &lt;/button&gt;
231                    &lt;button class="activity" activitytype="collaboration"&gt;
232                        &lt;p&gt;Creative zone for problem solving&lt;/p&gt;
233                    &lt;/button&gt;
234                    &lt;button class="activity" activitytype="concentration"&gt;
235                        &lt;p&gt;Concentrate on task&lt;/p&gt;
236                    &lt;/button&gt;
237                    &lt;button class="activity" activitytype="communication"&gt;
238                        &lt;p&gt;Not bothered by phone calls/chatting&lt;/p&gt;
239                    &lt;/button&gt;
240                    &lt;button class="activity" activitytype="collaboration"&gt;
241                        &lt;p&gt;Collaboration &amp;amp; Planning&lt;/p&gt;
242                    &lt;/button&gt;
243                    &lt;button class="activity" activitytype="chillout"&gt;
244                        &lt;p&gt;Coffee break with groups&lt;/p&gt;
245                    &lt;/button&gt;
246                    &lt;button class="activity" activitytype="collaboration"&gt;
247                        &lt;p&gt;Prepare a presentation together&lt;/p&gt;
248                    &lt;/button&gt;
249                    &lt;button class="activity" activitytype="communication"&gt;
250                        &lt;p&gt;Think for yourself&lt;/p&gt;
251                    &lt;/button&gt;
252                    &lt;button class="activity" activitytype="collaboration"&gt;
253                        &lt;p&gt;Meeting with no sensitive info&lt;/p&gt;
254                    &lt;/button&gt;
255                    &lt;button class="activity" activitytype="collaboration"&gt;
256                        &lt;p&gt;Quick, spontaneous meetings&lt;/p&gt;
257                    &lt;/button&gt;
258                    &lt;button class="activity" activitytype="communication"&gt;
259                        &lt;p&gt;Have a chat without disturbance&lt;/p&gt;
260                    &lt;/button&gt;
261                    &lt;button class="activity" activitytype="camp"&gt;
262                        &lt;p&gt;Room for external/internal parties&lt;/p&gt;
263                    &lt;/button&gt;
264                    &lt;button class="activity" activitytype="communication"&gt;
265                        &lt;p&gt;Private dialogue&lt;/p&gt;
266                    &lt;/button&gt;
267                    &lt;button class="activity" activitytype="communication"&gt;
268                        &lt;p&gt;Read a contract in silence&lt;/p&gt;
269                    &lt;/button&gt;
270                    &lt;button class="activity" activitytype="concentration"&gt;
271                        &lt;p&gt;Individual work without disturbance&lt;/p&gt;
272                    &lt;/button&gt;
273                    &lt;button class="activity" activitytype="communication"&gt;
274                        &lt;p&gt;Check e-mails&lt;/p&gt;
275                    &lt;/button&gt;
276                    &lt;button class="activity" activitytype="concentration"&gt;
277                        &lt;p&gt;Calm &amp;amp; quiet work space&lt;/p&gt;
278                    &lt;/button&gt;
279                    &lt;button class="activity" activitytype="chillout"&gt;
280                        &lt;p&gt;Hangout with colleagues outside project&lt;/p&gt;
281                    &lt;/button&gt;
282                    &lt;button class="activity" activitytype="communication"&gt;
283                        &lt;p&gt;Plan work&lt;/p&gt;
284                    &lt;/button&gt;
285                    &lt;button class="activity" activitytype="communication"&gt;
286                        &lt;p&gt;Lead employees/team&lt;/p&gt;
287                    &lt;/button&gt;
288                    &lt;button class="activity" activitytype="concentration"&gt;
289                        &lt;p&gt;Analyze data&lt;/p&gt;
290                    &lt;/button&gt;
291                    &lt;button class="activity" activitytype="concentration"&gt;
292                        &lt;p&gt;Rest&lt;/p&gt;
293                    &lt;/button&gt;
294                    &lt;button class="activity" activitytype="chillout"&gt;
295                        &lt;p&gt;Chat with a colleague about weekend plans&lt;/p&gt;
296                    &lt;/button&gt;
297                    &lt;button class="activity" activitytype="collaboration"&gt;
298                        &lt;p&gt;Discuss solutions for challenges in projects&lt;/p&gt;
299                    &lt;/button&gt;
300                    &lt;button class="activity" activitytype="chillout"&gt;
301                        &lt;p&gt;Pause from work&lt;/p&gt;
302                    &lt;/button&gt;
303                    &lt;button class="activity" activitytype="camp"&gt;
304                        &lt;p&gt;Private room for team/project for a long time&lt;/p&gt;
305                    &lt;/button&gt;
306                    &lt;button class="activity" activitytype="chillout"&gt;
307                        &lt;p&gt;Coffee with colleagues&lt;/p&gt;
308                    &lt;/button&gt;
309                    &lt;button class="activity" activitytype="chillout"&gt;
310                        &lt;p&gt;Networking&lt;/p&gt;
311                    &lt;/button&gt;
312                &lt;/div&gt;
313            &lt;/div&gt;
314        &lt;/section&gt;
315    &lt;/div&gt;
316    &lt;script src="index.js" type="text/javascript"/&gt;
317    &lt;script src="/static/js/bundle.js"/&gt;
318    &lt;script src="/static/js/0.chunk.js"/&gt;
319    &lt;script src="/static/js/main.chunk.js"/&gt;
320&lt;/body&gt;
321&lt;/html&gt;.header {
322    background-color: navy;
323    min-height: 7vh; 
324    display: grid;
325}
326
327.header h2 {
328    color: white;
329    text-align: center;
330    font-size: 45px;
331    font-weight: inherit;
332    font-family: arial;
333}
334
335.game-area {
336    display: flex;
337    justify-content: flex-start;
338    width: 100%;
339    background-color: navy;
340    height: 100%;
341    min-height: 1000px;
342}
343
344.activity-zone-container {
345    display: flex;
346}
347
348.zone-container {
349    display: flex;
350    flex-wrap: wrap;
351    max-width: 120vh;
352    position: relative;
353    max-height: 95vh;
354    margin: 0%;
355}
356
357.zone {
358    min-width: 32vh;
359    min-height: 27vh;
360    margin: 15px;
361    display: flex;
362    justify-content: center;
363    align-items: center;
364    width: 44%;
365    height: 33%;
366    max-height: 300px;
367}
368
369.zone p {
370    color: white;
371    text-align: center;
372    margin-bottom: 15px;
373    font-family: arial;
374}
375
376#concentration-zone {
377    background-color: orange;
378}
379#communication-zone {
380    background-color: yellow;
381}
382#communication-zone p {
383    color: black;
384}
385#collaboration-zone {
386    background-color: #3260a8;
387}
388#chill-out-zone {
389    background-color: pink;
390}
391#chill-out-zone p {
392    color: black;
393}
394#camp-zone {
395    background-color: green;
396}
397.activity-container {
398    margin: 0;
399    max-width: 73vh;
400    display: flex;
401    flex-wrap: wrap;
402    width: 40%;
403}
404
405.activity {
406    background-color: #3260a8;
407    margin: 17px;
408    display: flex;
409    justify-content: center;
410    cursor: pointer;
411    width: 140px;
412    height: 87px;
413}
414.activity-concentration {
415    background-color: orange;
416    margin: 17px;
417    display: flex;
418    justify-content: center;
419    color: white;
420    width: 140px;
421    height: 87px;
422}
423.activity-communication {
424    background-color: yellow;
425    margin: 17px;
426    display: flex;
427    justify-content: center;
428    width: 140px;
429    height: 87px;
430}
431.activity-chill-out {
432    background-color: pink;
433    margin: 17px;
434    display: flex;
435    justify-content: center;
436    width: 140px;
437    height: 87px;
438}
439.activity-camp {
440    background-color: green;
441    margin: 17px;
442    display: flex;
443    justify-content: center;
444    color: white;
445    width: 140px;
446    height: 87px;
447}
448.activity p {
449    color: white;
450}
451
452@media (min-width: 767px)  {
453    #camp-zone {
454        justify-content: center;
455        justify-self: center;
456        position: absolute;
457        z-index: 0;
458        bottom: 0;
459        right: 0;
460        width: 44%;
461        height: 33%;
462        min-width: 32vh;
463        min-height: 27vh;
464        margin-left: auto;
465        margin-right: auto;
466        margin-top: auto;
467        margin-bottom: auto;
468        left: 0;
469        top: 0;
470    }
471}
472
473@media (max-width: 768px)  {
474    .game-area {
475        min-height: 150vh;
476    }
477
478    .header h2 {
479        margin: 15px;
480        font-size: 30px;
481    }
482
483    .zone {
484        width: 220px;
485        height: 180px;
486    }
487}
488

Source https://stackoverflow.com/questions/70885838

QUESTION

Incorrect images path in production build - Vue.js

Asked 2022-Jan-24 at 11:27

I'm building my project with Vue.js 3, Vite.js. The app works fine when in dev mode (when using the dev server). Once I do launch the build command, Vite creates for me the /dist directory containing the build for my app. If I run the preview command (vite preview) it starts with no problem the preview of my build.

The problem is with some images which are coming from Vue components. All the images of my project are in the src/assets directory.

1.
2โ”œโ”€โ”€ Attribution.txt
3โ”œโ”€โ”€ README.md
4โ”œโ”€โ”€ index.html
5โ”œโ”€โ”€ package-lock.json
6โ”œโ”€โ”€ package.json
7โ”œโ”€โ”€ postcss.config.js
8โ”œโ”€โ”€ public
9โ”‚ย ย  โ””โ”€โ”€ favicon.ico
10โ”œโ”€โ”€ src
11โ”‚ย ย  โ”œโ”€โ”€ App.vue
12โ”‚ย ย  โ”œโ”€โ”€ assets
13โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Temp.png
14โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ bridge.png
15โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ city-security.png
16โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ credit-card.png
17โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ deforestation.png
18โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ eagle.png
19โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon
20โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-192x192.png
21โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-512x512.png
22โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ apple-touch-icon.png
23โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-16x16.png
24โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-32x32.png
25โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico
26โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ global-goals.png
27โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ hall.png
28โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ italian-flag.png
29โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ machine-learning.png
30โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ modern-architecture.png
31โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ moon-festival.png
32โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ people.png
33โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ planet-earth.png
34โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ police.png
35โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ teamwork.png
36โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ uk-flag.png
37โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ virtual.png
38โ”‚ย ย  โ”œโ”€โ”€ components
39โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Button.vue
40โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Card.vue
41โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Column.vue
42โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Footer.vue
43โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ MainContent.vue
44โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Navbar.vue
45โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ components-it
46โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Card-it.vue
47โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Footer-it.vue
48โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ Navbar-it.vue
49โ”‚ย ย  โ”œโ”€โ”€ main.js
50โ”‚ย ย  โ”œโ”€โ”€ router
51โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.js
52โ”‚ย ย  โ”œโ”€โ”€ tailwind.css
53โ”‚ย ย  โ””โ”€โ”€ views
54โ”‚ย ย      โ”œโ”€โ”€ CitySecurity.vue
55โ”‚ย ย      โ”œโ”€โ”€ Contribute.vue
56โ”‚ย ย      โ”œโ”€โ”€ Credits.vue
57โ”‚ย ย      โ”œโ”€โ”€ Goals.vue
58โ”‚ย ย      โ”œโ”€โ”€ Home.vue
59โ”‚ย ย      โ”œโ”€โ”€ It
60โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ CitySecurity-it.vue
61โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Contribute-it.vue
62โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Credits-it.vue
63โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Goals-it.vue
64โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Home-it.vue
65โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Municipality-it.vue
66โ”‚ย ย      โ””โ”€โ”€ Municipality.vue
67โ”œโ”€โ”€ tailwind.config.js
68โ””โ”€โ”€ vite.config.js
69
70

The images in the views have the correct path and are displayed correctly in the build. But the images in the components folder have a problem: the path doesn't change in the build file.

i.e.

1.
2โ”œโ”€โ”€ Attribution.txt
3โ”œโ”€โ”€ README.md
4โ”œโ”€โ”€ index.html
5โ”œโ”€โ”€ package-lock.json
6โ”œโ”€โ”€ package.json
7โ”œโ”€โ”€ postcss.config.js
8โ”œโ”€โ”€ public
9โ”‚ย ย  โ””โ”€โ”€ favicon.ico
10โ”œโ”€โ”€ src
11โ”‚ย ย  โ”œโ”€โ”€ App.vue
12โ”‚ย ย  โ”œโ”€โ”€ assets
13โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Temp.png
14โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ bridge.png
15โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ city-security.png
16โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ credit-card.png
17โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ deforestation.png
18โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ eagle.png
19โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon
20โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-192x192.png
21โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-512x512.png
22โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ apple-touch-icon.png
23โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-16x16.png
24โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-32x32.png
25โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico
26โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ global-goals.png
27โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ hall.png
28โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ italian-flag.png
29โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ machine-learning.png
30โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ modern-architecture.png
31โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ moon-festival.png
32โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ people.png
33โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ planet-earth.png
34โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ police.png
35โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ teamwork.png
36โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ uk-flag.png
37โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ virtual.png
38โ”‚ย ย  โ”œโ”€โ”€ components
39โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Button.vue
40โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Card.vue
41โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Column.vue
42โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Footer.vue
43โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ MainContent.vue
44โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Navbar.vue
45โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ components-it
46โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Card-it.vue
47โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Footer-it.vue
48โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ Navbar-it.vue
49โ”‚ย ย  โ”œโ”€โ”€ main.js
50โ”‚ย ย  โ”œโ”€โ”€ router
51โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.js
52โ”‚ย ย  โ”œโ”€โ”€ tailwind.css
53โ”‚ย ย  โ””โ”€โ”€ views
54โ”‚ย ย      โ”œโ”€โ”€ CitySecurity.vue
55โ”‚ย ย      โ”œโ”€โ”€ Contribute.vue
56โ”‚ย ย      โ”œโ”€โ”€ Credits.vue
57โ”‚ย ย      โ”œโ”€โ”€ Goals.vue
58โ”‚ย ย      โ”œโ”€โ”€ Home.vue
59โ”‚ย ย      โ”œโ”€โ”€ It
60โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ CitySecurity-it.vue
61โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Contribute-it.vue
62โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Credits-it.vue
63โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Goals-it.vue
64โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Home-it.vue
65โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Municipality-it.vue
66โ”‚ย ย      โ””โ”€โ”€ Municipality.vue
67โ”œโ”€โ”€ tailwind.config.js
68โ””โ”€โ”€ vite.config.js
69
70&lt;template&gt;
71  &lt;Navbar /&gt;
72  &lt;div class=&quot;container flex flex-col items-center py-20 font-bold mx-auto&quot;&gt;
73    &lt;h1 class=&quot;uppercase text-3xl&quot;&gt;A new way to live the City&lt;/h1&gt;
74    &lt;img src=&quot;../assets/hall.png&quot; alt=&quot;Town Hall&quot; width=&quot;250&quot; class=&quot;py-10&quot; /&gt;
75    &lt;p class=&quot;lg:w-1/2 text-justify leading-relaxed&quot;&gt;
76      To improve the municipality livings being we tought about some ideas, that
77      are somehow able to improve the qol(Quality of life). One of the most
78      reliable problem that requires to be solved is the minimization of
79      burocracy, tryna to make things digital any sort of procedure. One of ours
80      ideas is to improve the mechanism of shifting around the city, by giving
81      cityzens public and shareble veichles to reduce pollution and the waste of
82      fuel.
83    &lt;/p&gt;
84    &lt;div class=&quot;grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20&quot;&gt;
85      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
86        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Digitalization&lt;/h1&gt;
87        &lt;img
88          class=&quot;py-5&quot;
89          src=&quot;../assets/virtual.png&quot;
90          alt=&quot;Digitalization&quot;
91          width=&quot;100&quot;
92        /&gt;
93        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
94          Burocracy is so annoying, so we tought about how we can semplify it.
95          The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96          our city is going to have a system for all of them.
97        &lt;/p&gt;
98      &lt;/div&gt;
99      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
100        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Infrastructures Upgrading&lt;/h1&gt;
101        &lt;img
102          class=&quot;py-5&quot;
103          src=&quot;../assets/bridge.png&quot;
104          alt=&quot;Digitalization&quot;
105          width=&quot;100&quot;
106        /&gt;
107        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
108          To make our city better, our city is going to invest in
109          infrastructures to let cityzens live their life much better. Better
110          &quot;bridges&quot; makes better people.
111        &lt;/p&gt;
112      &lt;/div&gt;
113      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
114        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Innovative Learning&lt;/h1&gt;
115        &lt;img
116          class=&quot;py-5&quot;
117          src=&quot;../assets/Machine-Learning.png&quot;
118          alt=&quot;Digitalization&quot;
119          width=&quot;100&quot;
120        /&gt;
121        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
122          Our city is going to offer a learning system to make everyone learn
123          about technologies and new innovation. The mind of a man is the most
124          precious part of him.
125        &lt;/p&gt;
126      &lt;/div&gt;
127    &lt;/div&gt;
128  &lt;/div&gt;
129  &lt;Footer /&gt;
130&lt;/template&gt;
131
132&lt;script&gt;
133import Navbar from &quot;../components/Navbar.vue&quot;;
134import Footer from &quot;../components/Footer.vue&quot;;
135import Button from &quot;../components/Button.vue&quot;;
136export default {
137  name: &quot;Municipality&quot;,
138  components: {
139    Navbar,
140    Footer,
141    Button,
142  },
143};
144&lt;/script&gt;
145
146&lt;style&gt;&lt;/style&gt;
147
148

This is one of my views. In the build, all the img tags will have the correct path (Ex: /assets/imgName.randomNumbersAndString.png).

But this doesn't happen in the components.

i.e. - Card.vue component

1.
2โ”œโ”€โ”€ Attribution.txt
3โ”œโ”€โ”€ README.md
4โ”œโ”€โ”€ index.html
5โ”œโ”€โ”€ package-lock.json
6โ”œโ”€โ”€ package.json
7โ”œโ”€โ”€ postcss.config.js
8โ”œโ”€โ”€ public
9โ”‚ย ย  โ””โ”€โ”€ favicon.ico
10โ”œโ”€โ”€ src
11โ”‚ย ย  โ”œโ”€โ”€ App.vue
12โ”‚ย ย  โ”œโ”€โ”€ assets
13โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Temp.png
14โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ bridge.png
15โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ city-security.png
16โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ credit-card.png
17โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ deforestation.png
18โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ eagle.png
19โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon
20โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-192x192.png
21โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-512x512.png
22โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ apple-touch-icon.png
23โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-16x16.png
24โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-32x32.png
25โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico
26โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ global-goals.png
27โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ hall.png
28โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ italian-flag.png
29โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ machine-learning.png
30โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ modern-architecture.png
31โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ moon-festival.png
32โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ people.png
33โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ planet-earth.png
34โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ police.png
35โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ teamwork.png
36โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ uk-flag.png
37โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ virtual.png
38โ”‚ย ย  โ”œโ”€โ”€ components
39โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Button.vue
40โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Card.vue
41โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Column.vue
42โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Footer.vue
43โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ MainContent.vue
44โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Navbar.vue
45โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ components-it
46โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Card-it.vue
47โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Footer-it.vue
48โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ Navbar-it.vue
49โ”‚ย ย  โ”œโ”€โ”€ main.js
50โ”‚ย ย  โ”œโ”€โ”€ router
51โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.js
52โ”‚ย ย  โ”œโ”€โ”€ tailwind.css
53โ”‚ย ย  โ””โ”€โ”€ views
54โ”‚ย ย      โ”œโ”€โ”€ CitySecurity.vue
55โ”‚ย ย      โ”œโ”€โ”€ Contribute.vue
56โ”‚ย ย      โ”œโ”€โ”€ Credits.vue
57โ”‚ย ย      โ”œโ”€โ”€ Goals.vue
58โ”‚ย ย      โ”œโ”€โ”€ Home.vue
59โ”‚ย ย      โ”œโ”€โ”€ It
60โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ CitySecurity-it.vue
61โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Contribute-it.vue
62โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Credits-it.vue
63โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Goals-it.vue
64โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Home-it.vue
65โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Municipality-it.vue
66โ”‚ย ย      โ””โ”€โ”€ Municipality.vue
67โ”œโ”€โ”€ tailwind.config.js
68โ””โ”€โ”€ vite.config.js
69
70&lt;template&gt;
71  &lt;Navbar /&gt;
72  &lt;div class=&quot;container flex flex-col items-center py-20 font-bold mx-auto&quot;&gt;
73    &lt;h1 class=&quot;uppercase text-3xl&quot;&gt;A new way to live the City&lt;/h1&gt;
74    &lt;img src=&quot;../assets/hall.png&quot; alt=&quot;Town Hall&quot; width=&quot;250&quot; class=&quot;py-10&quot; /&gt;
75    &lt;p class=&quot;lg:w-1/2 text-justify leading-relaxed&quot;&gt;
76      To improve the municipality livings being we tought about some ideas, that
77      are somehow able to improve the qol(Quality of life). One of the most
78      reliable problem that requires to be solved is the minimization of
79      burocracy, tryna to make things digital any sort of procedure. One of ours
80      ideas is to improve the mechanism of shifting around the city, by giving
81      cityzens public and shareble veichles to reduce pollution and the waste of
82      fuel.
83    &lt;/p&gt;
84    &lt;div class=&quot;grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20&quot;&gt;
85      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
86        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Digitalization&lt;/h1&gt;
87        &lt;img
88          class=&quot;py-5&quot;
89          src=&quot;../assets/virtual.png&quot;
90          alt=&quot;Digitalization&quot;
91          width=&quot;100&quot;
92        /&gt;
93        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
94          Burocracy is so annoying, so we tought about how we can semplify it.
95          The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96          our city is going to have a system for all of them.
97        &lt;/p&gt;
98      &lt;/div&gt;
99      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
100        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Infrastructures Upgrading&lt;/h1&gt;
101        &lt;img
102          class=&quot;py-5&quot;
103          src=&quot;../assets/bridge.png&quot;
104          alt=&quot;Digitalization&quot;
105          width=&quot;100&quot;
106        /&gt;
107        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
108          To make our city better, our city is going to invest in
109          infrastructures to let cityzens live their life much better. Better
110          &quot;bridges&quot; makes better people.
111        &lt;/p&gt;
112      &lt;/div&gt;
113      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
114        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Innovative Learning&lt;/h1&gt;
115        &lt;img
116          class=&quot;py-5&quot;
117          src=&quot;../assets/Machine-Learning.png&quot;
118          alt=&quot;Digitalization&quot;
119          width=&quot;100&quot;
120        /&gt;
121        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
122          Our city is going to offer a learning system to make everyone learn
123          about technologies and new innovation. The mind of a man is the most
124          precious part of him.
125        &lt;/p&gt;
126      &lt;/div&gt;
127    &lt;/div&gt;
128  &lt;/div&gt;
129  &lt;Footer /&gt;
130&lt;/template&gt;
131
132&lt;script&gt;
133import Navbar from &quot;../components/Navbar.vue&quot;;
134import Footer from &quot;../components/Footer.vue&quot;;
135import Button from &quot;../components/Button.vue&quot;;
136export default {
137  name: &quot;Municipality&quot;,
138  components: {
139    Navbar,
140    Footer,
141    Button,
142  },
143};
144&lt;/script&gt;
145
146&lt;style&gt;&lt;/style&gt;
147
148&lt;template&gt;
149  &lt;div
150    class=&quot;card container flex flex-col items-center justify-center pt-20 pb-20&quot;
151  &gt;
152    &lt;a :href=&quot;`${link}`&quot;&gt;
153      &lt;img
154        :class=&quot;`${imgClass || 'py-5'}`&quot;
155        :src=&quot;`./src/assets/${imgName}`&quot;
156        :alt=&quot;`${imgAlt}`&quot;
157        width=&quot;100&quot;
158      /&gt;
159    &lt;/a&gt;
160    &lt;p class=&quot;lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;{{ text }}&lt;/p&gt;
161  &lt;/div&gt;
162&lt;/template&gt;
163
164&lt;script&gt;
165export default {
166  name: &quot;Card&quot;,
167  props: {
168    link: String,
169    imgClass: String,
170    imgName: String,
171    imgAlt: String,
172    text: String,
173  },
174};
175&lt;/script&gt;
176
177&lt;style scoped&gt;&lt;/style&gt;
178
179

Credits.vue view

1.
2โ”œโ”€โ”€ Attribution.txt
3โ”œโ”€โ”€ README.md
4โ”œโ”€โ”€ index.html
5โ”œโ”€โ”€ package-lock.json
6โ”œโ”€โ”€ package.json
7โ”œโ”€โ”€ postcss.config.js
8โ”œโ”€โ”€ public
9โ”‚ย ย  โ””โ”€โ”€ favicon.ico
10โ”œโ”€โ”€ src
11โ”‚ย ย  โ”œโ”€โ”€ App.vue
12โ”‚ย ย  โ”œโ”€โ”€ assets
13โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Temp.png
14โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ bridge.png
15โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ city-security.png
16โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ credit-card.png
17โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ deforestation.png
18โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ eagle.png
19โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon
20โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-192x192.png
21โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-512x512.png
22โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ apple-touch-icon.png
23โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-16x16.png
24โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-32x32.png
25โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico
26โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ global-goals.png
27โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ hall.png
28โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ italian-flag.png
29โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ machine-learning.png
30โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ modern-architecture.png
31โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ moon-festival.png
32โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ people.png
33โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ planet-earth.png
34โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ police.png
35โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ teamwork.png
36โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ uk-flag.png
37โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ virtual.png
38โ”‚ย ย  โ”œโ”€โ”€ components
39โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Button.vue
40โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Card.vue
41โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Column.vue
42โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Footer.vue
43โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ MainContent.vue
44โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Navbar.vue
45โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ components-it
46โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Card-it.vue
47โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Footer-it.vue
48โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ Navbar-it.vue
49โ”‚ย ย  โ”œโ”€โ”€ main.js
50โ”‚ย ย  โ”œโ”€โ”€ router
51โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.js
52โ”‚ย ย  โ”œโ”€โ”€ tailwind.css
53โ”‚ย ย  โ””โ”€โ”€ views
54โ”‚ย ย      โ”œโ”€โ”€ CitySecurity.vue
55โ”‚ย ย      โ”œโ”€โ”€ Contribute.vue
56โ”‚ย ย      โ”œโ”€โ”€ Credits.vue
57โ”‚ย ย      โ”œโ”€โ”€ Goals.vue
58โ”‚ย ย      โ”œโ”€โ”€ Home.vue
59โ”‚ย ย      โ”œโ”€โ”€ It
60โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ CitySecurity-it.vue
61โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Contribute-it.vue
62โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Credits-it.vue
63โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Goals-it.vue
64โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Home-it.vue
65โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Municipality-it.vue
66โ”‚ย ย      โ””โ”€โ”€ Municipality.vue
67โ”œโ”€โ”€ tailwind.config.js
68โ””โ”€โ”€ vite.config.js
69
70&lt;template&gt;
71  &lt;Navbar /&gt;
72  &lt;div class=&quot;container flex flex-col items-center py-20 font-bold mx-auto&quot;&gt;
73    &lt;h1 class=&quot;uppercase text-3xl&quot;&gt;A new way to live the City&lt;/h1&gt;
74    &lt;img src=&quot;../assets/hall.png&quot; alt=&quot;Town Hall&quot; width=&quot;250&quot; class=&quot;py-10&quot; /&gt;
75    &lt;p class=&quot;lg:w-1/2 text-justify leading-relaxed&quot;&gt;
76      To improve the municipality livings being we tought about some ideas, that
77      are somehow able to improve the qol(Quality of life). One of the most
78      reliable problem that requires to be solved is the minimization of
79      burocracy, tryna to make things digital any sort of procedure. One of ours
80      ideas is to improve the mechanism of shifting around the city, by giving
81      cityzens public and shareble veichles to reduce pollution and the waste of
82      fuel.
83    &lt;/p&gt;
84    &lt;div class=&quot;grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20&quot;&gt;
85      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
86        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Digitalization&lt;/h1&gt;
87        &lt;img
88          class=&quot;py-5&quot;
89          src=&quot;../assets/virtual.png&quot;
90          alt=&quot;Digitalization&quot;
91          width=&quot;100&quot;
92        /&gt;
93        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
94          Burocracy is so annoying, so we tought about how we can semplify it.
95          The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96          our city is going to have a system for all of them.
97        &lt;/p&gt;
98      &lt;/div&gt;
99      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
100        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Infrastructures Upgrading&lt;/h1&gt;
101        &lt;img
102          class=&quot;py-5&quot;
103          src=&quot;../assets/bridge.png&quot;
104          alt=&quot;Digitalization&quot;
105          width=&quot;100&quot;
106        /&gt;
107        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
108          To make our city better, our city is going to invest in
109          infrastructures to let cityzens live their life much better. Better
110          &quot;bridges&quot; makes better people.
111        &lt;/p&gt;
112      &lt;/div&gt;
113      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
114        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Innovative Learning&lt;/h1&gt;
115        &lt;img
116          class=&quot;py-5&quot;
117          src=&quot;../assets/Machine-Learning.png&quot;
118          alt=&quot;Digitalization&quot;
119          width=&quot;100&quot;
120        /&gt;
121        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
122          Our city is going to offer a learning system to make everyone learn
123          about technologies and new innovation. The mind of a man is the most
124          precious part of him.
125        &lt;/p&gt;
126      &lt;/div&gt;
127    &lt;/div&gt;
128  &lt;/div&gt;
129  &lt;Footer /&gt;
130&lt;/template&gt;
131
132&lt;script&gt;
133import Navbar from &quot;../components/Navbar.vue&quot;;
134import Footer from &quot;../components/Footer.vue&quot;;
135import Button from &quot;../components/Button.vue&quot;;
136export default {
137  name: &quot;Municipality&quot;,
138  components: {
139    Navbar,
140    Footer,
141    Button,
142  },
143};
144&lt;/script&gt;
145
146&lt;style&gt;&lt;/style&gt;
147
148&lt;template&gt;
149  &lt;div
150    class=&quot;card container flex flex-col items-center justify-center pt-20 pb-20&quot;
151  &gt;
152    &lt;a :href=&quot;`${link}`&quot;&gt;
153      &lt;img
154        :class=&quot;`${imgClass || 'py-5'}`&quot;
155        :src=&quot;`./src/assets/${imgName}`&quot;
156        :alt=&quot;`${imgAlt}`&quot;
157        width=&quot;100&quot;
158      /&gt;
159    &lt;/a&gt;
160    &lt;p class=&quot;lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;{{ text }}&lt;/p&gt;
161  &lt;/div&gt;
162&lt;/template&gt;
163
164&lt;script&gt;
165export default {
166  name: &quot;Card&quot;,
167  props: {
168    link: String,
169    imgClass: String,
170    imgName: String,
171    imgAlt: String,
172    text: String,
173  },
174};
175&lt;/script&gt;
176
177&lt;style scoped&gt;&lt;/style&gt;
178
179&lt;template&gt;
180  &lt;Navbar /&gt;
181  &lt;h1 class=&quot;uppercase lg:text-5xl text-2xl mx-auto text-center pt-20&quot;&gt;
182    Images and Icons attributions
183  &lt;/h1&gt;
184  &lt;div class=&quot;grid lg:grid-cols-3 place-items-center lg:pb-10 mx-auto&quot;&gt;
185    &lt;Card
186      link=&quot;Hall icons created by Smashicons - Flaticon&quot;
187      text=&quot;Hall icons created by Smashicons - Flaticon&quot;
188      imgAlt=&quot;Hall vector representation&quot;
189      imgName=&quot;hall.png&quot;
190    /&gt;
191    &lt;Card
192      link=&quot;https://www.flaticon.com/free-icons/moon-festival&quot;
193      text=&quot;Pokemon icons created by Roundicons Freebies - Flaticon&quot;
194      imgAlt=&quot;Temp logo&quot;
195      imgName=&quot;Temp.png&quot;
196    /&gt;
197    &lt;Card
198      link=&quot;https://www.flaticon.com/free-icons/moon-festival&quot;
199      text=&quot;Moon festival icons created by Flat Icons - Flaticon&quot;
200      imgAlt=&quot;Moon vector representation&quot;
201      imgName=&quot;moon-festival.png&quot;
202    /&gt;
203    &lt;Card
204      link=&quot;https://www.flaticon.com/free-icons/digital&quot;
205      text=&quot;Digital icons created by Freepik - Flaticon&quot;
206      imgAlt=&quot;Digital vector representation&quot;
207      imgName=&quot;virtual.png&quot;
208    /&gt;
209    &lt;Card
210      link=&quot;https://www.flaticon.com/free-icons/tower-bridge&quot;
211      text=&quot;Tower bridge icons created by Freepik - Flaticon&quot;
212      imgAlt=&quot;Bridge vector representation&quot;
213      imgName=&quot;bridge.png&quot;
214    /&gt;
215    &lt;Card
216      link=&quot;https://www.flaticon.com/free-icons/machine-learning&quot;
217      text=&quot;Machine learning icons created by Flat Icons - Flaticon&quot;
218      imgAlt=&quot;Machine learning vector representation&quot;
219      imgName=&quot;machine-learning.png&quot;
220    /&gt;
221    &lt;Card 
222      link=&quot;https://www.flaticon.com/free-icons/business-and-finance&quot;
223      text=&quot;Business and finance icons created by Freepik - Flaticon&quot;
224      imgAlt=&quot;City security vector&quot;
225      imgName=&quot;city-security.png&quot;
226    /&gt;
227    &lt;Card 
228      link=&quot;https://www.flaticon.com/free-icons/credit-card&quot;
229      text=&quot;Credit card icons created by Freepik - Flaticon&quot;
230      imgAlt=&quot;Credit card vector&quot;
231      imgName=&quot;credit-card.png&quot;
232    /&gt;
233    &lt;Card 
234      link=&quot;https://www.flaticon.com/free-icons/deforestation&quot;
235      text=&quot;Deforestation icons created by Freepik - Flaticon&quot;
236      imgAlt=&quot;Deforestation vector representation&quot;
237      imgName=&quot;deforestation.png&quot;
238    /&gt;
239    &lt;Card 
240      link=&quot;https://www.flaticon.com/free-icons/eagle&quot;
241      text=&quot;Eagle icons created by Freepik - Flaticon&quot;
242      imgAlt=&quot;Eagle vector&quot;
243      imgName=&quot;eagle.png&quot;
244    /&gt;
245    &lt;Card 
246      link=&quot;https://www.flaticon.com/free-icons/modern-architecture&quot;
247      text=&quot;Modern architecture icons created by Freepik - Flaticon&quot;
248      imgAlt=&quot;Modern architecture vector&quot;
249      imgName=&quot;modern-architecture.png&quot;
250    /&gt;
251    &lt;Card 
252      link=&quot;https://www.flaticon.com/free-icons/environment&quot;
253      text=&quot;Environment icons created by Freepik - Flaticon&quot;
254      imgAlt=&quot;Earth planet vector&quot;
255      imgName=&quot;planet-earth.png&quot;
256    /&gt;
257  &lt;/div&gt;
258  &lt;div class=&quot;container mx-auto flex flex-row items-center justify-center text-center&quot;&gt;
259    &lt;Card 
260      link=&quot;https://www.flaticon.com/free-icons/police&quot;
261      text=&quot;Police icons created by Freepik - Flaticon&quot;
262      imgAlt=&quot;Police officer vector&quot;
263      imgName=&quot;police.png&quot;
264    /&gt;
265    &lt;Card 
266      link=&quot;https://www.flaticon.com/free-icons/collaboration&quot;
267      text=&quot;Collaboration icons created by Freepik - Flaticon&quot;
268      imgAlt=&quot;Community vector&quot;
269      imgName=&quot;teamwork.png&quot;
270    /&gt;
271  &lt;/div&gt;
272  &lt;Footer /&gt;
273&lt;/template&gt;
274
275&lt;script&gt;
276import Card from &quot;../components/Card.vue&quot;;
277import Navbar from &quot;../components/Navbar.vue&quot;;
278import Footer from &quot;../components/Footer.vue&quot;;
279import Button from &quot;../components/Button.vue&quot;;
280
281export default {
282  name: &quot;Credits&quot;,
283  components: {
284    Navbar,
285    Footer,
286    Button,
287    Card,
288  },
289};
290&lt;/script&gt;
291
292&lt;style scoped&gt;&lt;/style&gt;
293
294

In this case, when I pass the imgName to the Card component, in the build file the path of the image is ./src/assets/name.png.

How can I fix?

ANSWER

Answered 2022-Jan-24 at 11:27

Instead of using relative path (..) to the assets folder, you can use @/assets from any of the vue components to refer to files in the assets folder.

E.g this should work, no matter how deep the Vue component is nested.

1.
2โ”œโ”€โ”€ Attribution.txt
3โ”œโ”€โ”€ README.md
4โ”œโ”€โ”€ index.html
5โ”œโ”€โ”€ package-lock.json
6โ”œโ”€โ”€ package.json
7โ”œโ”€โ”€ postcss.config.js
8โ”œโ”€โ”€ public
9โ”‚ย ย  โ””โ”€โ”€ favicon.ico
10โ”œโ”€โ”€ src
11โ”‚ย ย  โ”œโ”€โ”€ App.vue
12โ”‚ย ย  โ”œโ”€โ”€ assets
13โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Temp.png
14โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ bridge.png
15โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ city-security.png
16โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ credit-card.png
17โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ deforestation.png
18โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ eagle.png
19โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon
20โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-192x192.png
21โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ android-chrome-512x512.png
22โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ apple-touch-icon.png
23โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-16x16.png
24โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ favicon-32x32.png
25โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico
26โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ global-goals.png
27โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ hall.png
28โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ italian-flag.png
29โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ machine-learning.png
30โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ modern-architecture.png
31โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ moon-festival.png
32โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ people.png
33โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ planet-earth.png
34โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ police.png
35โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ teamwork.png
36โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ uk-flag.png
37โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ virtual.png
38โ”‚ย ย  โ”œโ”€โ”€ components
39โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Button.vue
40โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Card.vue
41โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Column.vue
42โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Footer.vue
43โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ MainContent.vue
44โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Navbar.vue
45โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ components-it
46โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Card-it.vue
47โ”‚ย ย  โ”‚ย ย      โ”œโ”€โ”€ Footer-it.vue
48โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ Navbar-it.vue
49โ”‚ย ย  โ”œโ”€โ”€ main.js
50โ”‚ย ย  โ”œโ”€โ”€ router
51โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.js
52โ”‚ย ย  โ”œโ”€โ”€ tailwind.css
53โ”‚ย ย  โ””โ”€โ”€ views
54โ”‚ย ย      โ”œโ”€โ”€ CitySecurity.vue
55โ”‚ย ย      โ”œโ”€โ”€ Contribute.vue
56โ”‚ย ย      โ”œโ”€โ”€ Credits.vue
57โ”‚ย ย      โ”œโ”€โ”€ Goals.vue
58โ”‚ย ย      โ”œโ”€โ”€ Home.vue
59โ”‚ย ย      โ”œโ”€โ”€ It
60โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ CitySecurity-it.vue
61โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Contribute-it.vue
62โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Credits-it.vue
63โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Goals-it.vue
64โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ Home-it.vue
65โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Municipality-it.vue
66โ”‚ย ย      โ””โ”€โ”€ Municipality.vue
67โ”œโ”€โ”€ tailwind.config.js
68โ””โ”€โ”€ vite.config.js
69
70&lt;template&gt;
71  &lt;Navbar /&gt;
72  &lt;div class=&quot;container flex flex-col items-center py-20 font-bold mx-auto&quot;&gt;
73    &lt;h1 class=&quot;uppercase text-3xl&quot;&gt;A new way to live the City&lt;/h1&gt;
74    &lt;img src=&quot;../assets/hall.png&quot; alt=&quot;Town Hall&quot; width=&quot;250&quot; class=&quot;py-10&quot; /&gt;
75    &lt;p class=&quot;lg:w-1/2 text-justify leading-relaxed&quot;&gt;
76      To improve the municipality livings being we tought about some ideas, that
77      are somehow able to improve the qol(Quality of life). One of the most
78      reliable problem that requires to be solved is the minimization of
79      burocracy, tryna to make things digital any sort of procedure. One of ours
80      ideas is to improve the mechanism of shifting around the city, by giving
81      cityzens public and shareble veichles to reduce pollution and the waste of
82      fuel.
83    &lt;/p&gt;
84    &lt;div class=&quot;grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20&quot;&gt;
85      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
86        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Digitalization&lt;/h1&gt;
87        &lt;img
88          class=&quot;py-5&quot;
89          src=&quot;../assets/virtual.png&quot;
90          alt=&quot;Digitalization&quot;
91          width=&quot;100&quot;
92        /&gt;
93        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
94          Burocracy is so annoying, so we tought about how we can semplify it.
95          The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96          our city is going to have a system for all of them.
97        &lt;/p&gt;
98      &lt;/div&gt;
99      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
100        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Infrastructures Upgrading&lt;/h1&gt;
101        &lt;img
102          class=&quot;py-5&quot;
103          src=&quot;../assets/bridge.png&quot;
104          alt=&quot;Digitalization&quot;
105          width=&quot;100&quot;
106        /&gt;
107        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
108          To make our city better, our city is going to invest in
109          infrastructures to let cityzens live their life much better. Better
110          &quot;bridges&quot; makes better people.
111        &lt;/p&gt;
112      &lt;/div&gt;
113      &lt;div class=&quot;card container flex flex-col items-center justify-center&quot;&gt;
114        &lt;h1 class=&quot;uppercase text-xl&quot;&gt;Innovative Learning&lt;/h1&gt;
115        &lt;img
116          class=&quot;py-5&quot;
117          src=&quot;../assets/Machine-Learning.png&quot;
118          alt=&quot;Digitalization&quot;
119          width=&quot;100&quot;
120        /&gt;
121        &lt;p class=&quot;lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4&quot;&gt;
122          Our city is going to offer a learning system to make everyone learn
123          about technologies and new innovation. The mind of a man is the most
124          precious part of him.
125        &lt;/p&gt;
126      &lt;/div&gt;
127    &lt;/div&gt;
128  &lt;/div&gt;
129  &lt;Footer /&gt;
130&lt;/template&gt;
131
132&lt;script&gt;
133import Navbar from &quot;../components/Navbar.vue&quot;;
134import Footer from &quot;../components/Footer.vue&quot;;
135import Button from &quot;../components/Button.vue&quot;;
136export default {
137  name: &quot;Municipality&quot;,
138  components: {
139    Navbar,
140    Footer,
141    Button,
142  },
143};
144&lt;/script&gt;
145
146&lt;style&gt;&lt;/style&gt;
147
148&lt;template&gt;
149  &lt;div
150    class=&quot;card container flex flex-col items-center justify-center pt-20 pb-20&quot;