Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

In style.css add media queries for THREE different breakpoints. Do your research on common breakpoints and be sure to add comments defining each and explaining

In style.css add media queries for THREE different breakpoints. Do your research on common breakpoints and be sure to add comments defining each and explaining why you chose that specific one. Your comments should be in the CSS sheet within comment tags. Target two specific elements in your index.html file for each breakpoint, so if the browser screen size is dragged larger and smaller, you are able to clearly see the two different styling changes in the browser for each breakpoint. It can be anything: text color change, background color, etc. Get creative, but be sure to apply other style changes than just the background color. Feel free to add classes or IDs attributes, or tags, to your index.html file to help target your HTML elements.

I need a step-by-step on entering this into html and css folders. I'm using sublime and WINSCP

My current index.html folder:

Gaylisha Walker Week 2

Gaylisha Walker

Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius. Vestibulum venenatis quam enim, a eleifend tortor blandit non. >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Footer

My css.style folder:

/* Mobile first */ body { font-family: Arial, sans-serif; font-size: 16px; background-color: #e0e0e0; color: #333; }

header h1 { text-align: center; color: #333; }

nav ul { display: flex; justify-content: space-around; background-color: #333; color: #fff; list-style: none; padding: 0; }

nav a { flex: 1; text-transform: uppercase; text-decoration: none; color: #fff; padding: 10px 20px; }

nav a:hover { background-color: #ddd; color: #333; }

article h2 { text-align: center; color: #333; }

footer { text-align: center; padding: 30px; background-color: #333; color: #fff; }

/* Tablet Breakpoint */ @media (min-width: 768px) { body { font-size: 18px; }

nav ul { justify-content: center; } }

/* Desktop Breakpoint */ @media (min-width: 1024px) { body { font-size: 20px; }

header h1 { text-align: left; }

nav a { padding: 20px 30px; } }

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Main Memory Database Systems

Authors: Frans Faerber, Alfons Kemper, Per-Åke Alfons

1st Edition

1680833243, 978-1680833249

More Books

Students also viewed these Databases questions

Question

What are the challenges associated with tunneling in urban areas?

Answered: 1 week ago

Question

What are the main differences between rigid and flexible pavements?

Answered: 1 week ago

Question

What is the purpose of a retaining wall, and how is it designed?

Answered: 1 week ago

Question

How do you determine the load-bearing capacity of a soil?

Answered: 1 week ago

Question

what is Edward Lemieux effect / Anomeric effect ?

Answered: 1 week ago

Question

b. Explain how you initially felt about the communication.

Answered: 1 week ago