@ikai2Submitted about 1 month ago
Latest solutions
Latest comments
- @keemah03Posted about 1 month ago
a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy niceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee designnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
0 - P@niuguySubmitted about 1 month ago
- @rtambuntSubmitted 2 months ago
- P@oramadnSubmitted 3 months agoWhat specific areas of your project would you like help with?
I have issues with margin and padding for when the project becomes vertical (mobile)
Also dealing with the image. I am not sure how to adjust its height from 450 to 240 when the screen becomes smaller.
Lastly the threshold for media query. How do i decide on that?
@keemah03Posted 3 months ago1.Adjusting Margin and Padding for Mobile: Use CSS media queries to apply different margin and padding values based on the screen size. For example: css /* Default styles */ .container { margin: 20px; padding: 20px; }
/* Mobile-specific styles / @media (max-width: 768px) { .container { margin: 10px; padding: 15px; } } Analyze your design and decide how much space (margin/padding) is acceptable for smaller screens. Tighten margins/paddings as necessary for readability. 2. Adjusting Image Height: Use the height property in media queries to change the image size dynamically: css / Default styles / img.responsive { height: 450px; width: auto; / Maintains aspect ratio */ }
/* Mobile-specific styles */ @media (max-width: 768px) { img.responsive { height: 240px; } } Alternatively, you can use max-height and max-width in percentage values to make images scale more flexibly. 3. Choosing the Threshold for Media Queries: Analyze Device Breakpoints: Consider common breakpoints: 320px for small phones. 480px for larger phones. 768px for tablets. 1024px for small laptops. Design Consideration: Look at your layout and find the screen width where it starts to break or look awkward. Set that as a breakpoint. Responsive Frameworks: Many frameworks like Bootstrap use 576px, 768px, 992px, and 1200px. These are good starting points. For example:
css /* Phone styles / @media (max-width: 480px) { / Adjustments for smaller screens */ }
/* Tablet styles / @media (max-width: 768px) { / Adjustments for tablets */ }
Marked as helpful0
