-
Posts
-
I am trying to isolate an @media code so that my 2 column layout remains 2 columns on mobile devices. But I want to have it only in one section and not the entire site or page. Here is what I have that is working and not working:
WORKING:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column {
width: 48% !important;
min-height: 200px !important;
margin-right: 2% !important;
}NOT WORKING (I want to keep the changes within #impact-boxes):
@media only screen and (max-width: 767px) {
.responsive #impact-boxes #wrap_all .flex_column {
width: 48% !important;
min-height: 200px !important;
margin-right: 2% !important;
}The “#top” element has been the issue. I’ve tried moving it, removing it, merging it, and nothing seems to work.
to what element does the ID: #impact-boxes belong?
i do not believe that it is a parent of #wrap_all ! This is parent of all content you can set on default.
the #top ID belongs to the body tag and is parent of #wrap_all
so this might be the right sequence ( cascading ) : .responsive #top #wrap_all #impact-boxes .flex_column
if it is a color-section
- The topic ‘2 column rows for mobile view’ is closed to new replies.