Change bg color for the mobile version

Hi, it's about this page: https://www.ohvaz.ro/blog/budinca-de-chia-tot-ce-trebuie-sa-stii/ the mobile version. I wanna remove some of the padding so people can have an easier time reading it. Trouble is - I have this grey/pink background color. I'd like to remove it, BUT only for the mobile version and only for the blog. Not for the rest of the website. I'm a beginner. How can I achieve that with minimal changes? Thank you!
22 Replies
Tenkes
Tenkesβ€’16mo ago
Have you heard of media queries? It should do the job
ChrisBarin
ChrisBarinβ€’16mo ago
no, I'm not familiar with that @Tenkes
Tenkes
Tenkesβ€’16mo ago
you should really look into it, it's base knowledge for making sites responsive (responsive means they look good on all, big and small, devices).
ChrisBarin
ChrisBarinβ€’16mo ago
ok. would that help me fix this issue? I'm looking for a quick fix considering my level and the difficulty of this task
glutonium
glutoniumβ€’16mo ago
well since it's a for only mobile u really need media query there's no other way around with css And it's not that hard
ChrisBarin
ChrisBarinβ€’16mo ago
ok
Tenkes
Tenkesβ€’16mo ago
absolutely. its for setting styles only on certain devices
ChrisBarin
ChrisBarinβ€’16mo ago
I know I have a separate part of my css file for mobile devices but I can't find how the bg color is defined I used my inspector like crazy
glutonium
glutoniumβ€’16mo ago
@media only screen and (max-width: 450px) {
element {
background-color: your chocie;
}
}
@media only screen and (max-width: 450px) {
element {
background-color: your chocie;
}
}
background : ; is the property u use to define background color
Tenkes
Tenkesβ€’16mo ago
oh great thanks, it's a struggle writing it I phone πŸ˜‚ that's what I was going to write
glutonium
glutoniumβ€’16mo ago
me too on phoneπŸ˜‚πŸ˜‚ and I didn't type i just copied from internet changed the width and the text inside @chrisbarin just put this at the end of your css with the name of the element that's background u want to change in the element part and then add the background color u want inside the code where it's writte your chocie
ChrisBarin
ChrisBarinβ€’16mo ago
oh nice! thanks let me try this out
Tenkes
Tenkesβ€’16mo ago
but make sure to look more into it, it's really base knowledge for making responsive websites. and you don't have to create separate files for other devices Kevin has few awesome videos on responsiveness
glutonium
glutoniumβ€’16mo ago
yup
ChrisBarin
ChrisBarinβ€’16mo ago
thanks a lot. I'm a UI designer looking to learn more about dev work I appreciate the patience and the help
ChrisBarin
ChrisBarinβ€’16mo ago
ChrisBarin
ChrisBarinβ€’16mo ago
am I missing something here? it's not working even with important it's not picking it up
Tenkes
Tenkesβ€’16mo ago
you need to specify element(s) you are targeting take one more look at this you need element you want to style instead of element
ChrisBarin
ChrisBarinβ€’16mo ago
sure, but in my case, what would that be? it seems like .container isn't the right one it messes up a lot of things ooh I think it's body .site-content one moment..
Tenkes
Tenkesβ€’16mo ago
can't tell since I can't see your html
ChrisBarin
ChrisBarinβ€’16mo ago
yay, I managed! I typically have a hard time with very broad elements. specific ones are easy with inspector
Tenkes
Tenkesβ€’16mo ago
nice! glad it worked :)