@Bishalsnghd07
Posted
Hi, Chiwai๐
You are giving width of image 19.375rem
in breakpoint 375px which preventing your full width of image in mobile view.
Apply this changes only in media queries and check whether the issue is solve or not๐ you only need to remove width and all set
@media only screen and (max-width: 375px) { body
{ width: 22.5rem;โ(remove this) margin: 0; } main { width: 22.5rem;โ(remove this) margin: 0; border-radius: 0; } .image-container { margin: 0; padding: 0; } img { width: 19.375rem; โ(remove this) border-radius: 0; padding-right: 1.875rem; margin: 0; } .description { width: 19.375rem;โ(remove this) } .preparation { width: 18.75rem;โ(remove this) padding-left: 0.625rem; padding-right: 0.625rem; } .preparation-list { width: 19.375rem;โ(remove this) } .ingredients-used ul { width: 19.375rem;โ(remove this) } .ingredients-used li { text-indent: -1.25rem; } .instructions-items { width: 18.75rem;โ(remove this) padding-right: 0.625rem; } .nutrition-table { width: 19.375rem;โ(remove this) } }
Marked as helpful