Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 6, 2017 at 3:07 pm #743400
    M1000000

    Aim is to apply a class to columns and use it to change their breakpoint so they (and only these columns) render full width (ie mobile view) below 1024px..
    Tried this code but not doing the job:

    @media only screen and (max-width: 1024px) {
.flex_column.af-column-breakpoint {
	display: block!important;
	clear:both!important;
width:100% !important;
}
}

    Any pointers appreciated. Thanks.

    February 6, 2017 at 3:12 pm #743403
    Yigit

    Hi!

    Can you please create a temporary admin login and post it here privately? Also, please point out the page you are working on.

    Best regards,
    Yigit

    February 6, 2017 at 3:40 pm #743415
    M1000000

    soz – local host for a couple more days.

    It’s not site specific – aim is to target columns in a section using a class and altering the breakpoint for them.

    I have moved forwards a little from the above. Now applying class to parent color section and this:

     @media only screen and (max-width: 1024px) {
.af-column-breakpoint .flex_column_table {
	display: block!important;
	margin: 0!important;
}
.af-column-breakpoint .flex_column_table_cell {
	float: none!important;
	display: block!important;
	clear: both!important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 20px 0!important;
}
}

    It works but code feels a little clumsy – is this the best aproach in your opinion?

    Thanks, M

    February 7, 2017 at 8:21 am #743722
    Rikard

    Hi,

    In my opinion there is no right or wrong when it comes to CSS, if it works it works. I can’t see anything wrong with your code so I would say go for it :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.