Diskusi M Farhan Al Khiddier

Selesai
M Farhan Al Khiddier
Ditanyakan pada: Studi Kasus Membuet Tabel Pricing Part 5

flexbox media query

boleh dibantu kak, saya ada masalah saat membuat media query seperti di video terkahir, masalahnya flexbox tidak berubah, ada salah dimana ya kodingnya html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

html { font-family: 'open sans', sans-serif; box-sizing: border-box; }

body { background-color: #14fa1e; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

.panel { background-color: aliceblue; border-radius: 10px; padding: 15px 25px; width: 100%; max-width: 960px; flex-direction: column; text-align: center; text-transform: capitalize; }

.pricing-header { color: #888; letter-spacing: 1px; font-weight: 600; }

.pricing-features { margin: 50px 0 15px; color: aqua;

}

.pricing-features-item { font-weight: 600; letter-spacing: 1px; font-size: 12px; line-height: 1.5; padding: 15px 0; border-top: 1px solid aliceblue; }

.pricing-features-item:last-child { border-bottom: 1px solid aliceblue; }

.pricing-price { color: aqua; display: block; font-size: 35px; font-weight: 700; }

.pricing-img { width: 100%; max-width: 100px; }

.pricing-button { border: 1px solid #9881ff; border-radius: 10px; color: #34dfff; display: inline-block; padding: 15px 35px; text-decoration: none; }

.pricing-button:hover, .pricing-button:focus {
background-color: blue; }

.pricing-button.is-featured { background-color: aqua; color: black; }

.pricing-button.is-featured:hover, .pricing-button.is-featured:focus {
background-color: darkblue; }

@media (min-width: 900px) { .panel { color: #9881ff; flex-direction: row; } }

2 Jawaban

Avatar
Muhammad Fakhry Burhanuddin

8 bulan yang lalu

Tolong share kode css dan html di https://codesandbox.io/ agar mudah diperiksa.

Kalau post kodenya di sini menyusahkan kami untuk memeriksanya.

Avatar
BroKoding

8 bulan yang lalu

Jawaban Terpilih

Halo kak, selain dari css, struktur html dan implementasi class nya juga perlu diperhatikan. Mungkin bisa lampirkan secara terpisah untuk html dan css nya agar bisa dicoba ya kak.