Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9270e74

Browse files
photosnap app, coffee/dine apps resp img fix
1 parent 2b31117 commit 9270e74

File tree

17 files changed

+155
-23
lines changed

17 files changed

+155
-23
lines changed

‎src/pages/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
export const pagesData = [
2+
{
3+
id:"7",
4+
title: "Photosnap multi-page website",
5+
desc: "Four pages App with beautiful image galleries and diverse page layouts. Fully responsive for all devices.",
6+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/bgjwz6i6nfnqngx7ae36.jpg",
7+
category:"advanced",
8+
type: "multi",
9+
link:"https://photosnap-demo.netlify.app/",
10+
},
211
{
312
id:"1",
413
title: "Arch Studio multi-page website",

‎src/pages/intermediate/CoffeeRoasters/About/Commitment.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin-bottom: 260px;
77
}
88

9-
.coffee-about-commitment > img {
9+
.coffee-about-commitment > picture>img {
1010
border-radius: 10px;
1111
/* width: 100%; */
1212
}
@@ -50,15 +50,15 @@
5050
margin-bottom: 20px;
5151
}
5252

53-
.coffee-about-commitment > img {
53+
.coffee-about-commitment > picture>img {
5454
border-radius: 10px;
5555
height: 100%;
5656
width: 100%;
5757
object-fit: cover;
5858
}
5959
}
6060

61-
@media only screen and (max-width: 850px) {
61+
@media only screen and (max-width: 768px) {
6262
.coffee-about-commitment {
6363
display: flex;
6464
flex-direction: column;
@@ -68,8 +68,14 @@
6868
margin-top: 0px;
6969
}
7070

71-
.coffee-about-commitment > img {
72-
max-height: 400px;
71+
.coffee-about-commitment > picture {
72+
max-width: 350px;
73+
margin: 0 auto;
74+
}
75+
.coffee-about-commitment > picture > img {
76+
/* max-height: 400px; */
77+
/* object-fit: cover; */
78+
/* max-width: 400px; */
7379
}
7480

7581
.coffee-about-commitment-text > h1 {

‎src/pages/intermediate/CoffeeRoasters/About/Commitment.jsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,23 @@ import commitmentImgMobile from '../assets/images/about/mobile/image-commitment.
77
const Commitment = () => {
88
return (
99
<section className='coffee-about-commitment'>
10-
<img src={commitmentImg} srcSet={`${commitmentImg}, ${commitmentImgTablet} 1200w, ${commitmentImgMobile} 768w`} alt="" />
10+
<picture>
11+
<source media='(max-width:768px)'
12+
srcSet={`${commitmentImgMobile} 768w`}
13+
sizes="768px"
14+
/>
15+
<source media='(max-width:1200px)'
16+
srcSet={`${commitmentImgTablet} 1200w`}
17+
sizes="1200px"
18+
/>
19+
<source media='(min-width:1201px)'
20+
srcSet={`${commitmentImg} 1201w`}
21+
sizes="1201px"
22+
/>
23+
<img src={commitmentImg}
24+
alt="" />
25+
</picture>
26+
{/* <img src={commitmentImg} srcSet={`${commitmentImg}, ${commitmentImgTablet} 1200w, ${commitmentImgMobile} 768w`} alt="" /> */}
1127
<div className="coffee-about-commitment-text">
1228
<h1>Our commitment</h1>
1329
<p>We’re built on a simple mission and a commitment to doing good along the way. We want to make it easy for you to discover and brew the world’s best coffee at home. It all starts at the source. To locate the specific lots we want to purchase, we travel nearly 60 days a year trying to understand the challenges and opportunities in each of these places. We collaborate with exceptional coffee growers and empower a global community of farmers through with well above fair-trade benchmarks. We also offer training, support farm community initiatives, and invest in coffee plant science. Curating only the finest blends, we roast each lot to highlight tasting profiles distinctive to their native growing region.</p>

‎src/pages/intermediate/CoffeeRoasters/About/Quality.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
border-radius: 10px;
1010
}
1111

12-
.coffee-about-quality > img {
12+
.coffee-about-quality > picture>img {
1313
border-radius: 10px;
1414
margin-top: -160px;
1515
}
@@ -46,10 +46,15 @@
4646
gap: 80px;
4747
margin-bottom: 100px;
4848
}
49-
.coffee-about-quality > img {
49+
.coffee-about-quality > picture {
5050
border-radius: 10px;
5151
/* margin-top: 0px; */
5252
order: -1;
53+
margin: 0 auto;
54+
}
55+
56+
.coffee-about-quality > picture > img {
57+
width: 100%;
5358
}
5459

5560
.coffee-about-quality-text {

‎src/pages/intermediate/CoffeeRoasters/About/Quality.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,19 @@ const Quality = () => {
1010
<h1>Uncompromising quality</h1>
1111
<p>Although we work with growers who pay close attention to all stages of harvest and processing, we employ, on our end, a rigorous quality control program to avoid over-roasting or baking the coffee dry. Every bag of coffee is tagged with a roast date and batch number. Our goal is to roast consistent, user-friendly coffee, so that brewing is easy and enjoyable.</p>
1212
</div>
13-
<img src={qualityImg} srcSet={`${qualityImg}, ${qualityImgTablet} 1200w`} alt="" />
13+
<picture>
14+
<source media='(max-width:1200px)'
15+
srcSet={`${qualityImgTablet} 1200w`}
16+
sizes="1200px"
17+
/>
18+
<source media='(min-width:1201px)'
19+
srcSet={`${qualityImg} 1201w`}
20+
sizes="1201px"
21+
/>
22+
<img src={qualityImg}
23+
alt="" />
24+
</picture>
25+
{/* <img src={qualityImg} srcSet={`${qualityImg}, ${qualityImgTablet} 1200w`} alt="" /> */}
1426
</section>
1527
)
1628
}
130 KB
Loading[フレーム]
411 KB
Loading[フレーム]
534 KB
Loading[フレーム]
272 KB
Loading[フレーム]
324 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /