The pictures are 100% width of their parent elements (which are in return 100% width of their parents, up to the wrapper which width is explicitly set), if you remove the width on the wrapper (and the margin on body) they will be full width.
@Paulie_D (thanks a lot for removing extra posts). and answer to your question is yes.
a) I want the pictures to cover whole screen.
b) I want the Maven logo and menu (in same line) and fixed on the top menu. when i scroll down.
I have tried what you have suggested. but its still not working.
width: 100%; /* 1140px – 10% for margins */ (changed the width to 100% for wrapper)
/**margin: 0 auto; */ (removed the margin part)
after this all the pictures should have taken the whole screen but its not. (kindly let me know if there is something which i am missing)??
in my main.css there are 3 different media queries. ( i am making this website only for mobile and not for anything else). that’s why i will be using majorly the below mediaquery
@media only screen and (min-width: 480px)
@media only screen and (min-width: 768px)
@media only screen and (min-width: 1140px)
Now, i would like to know what should i exactly change in media query (as per unasAquila) i should make it 533px (for 480px) is that correct/???
Hi, unasAquila -> its not working the way you suggested. (i want my 7 images to cover the whole area, there should be no orange left on corners. this can be due to padding, margin,border — for the same, i have already checked the whole code and commented every margin, padding, border -which i was sure i didnt needed at all..)
@media only screen and (min-width: 533px)
@media only screen and (min-width: 854px)
@media only screen and (min-width: 1266px)