Media queries for bottom 2 position

Votes

Undo

Mol4
Commercial Templates
Friday, 29 October 2021
Subscribe via email

Hello Ciaran,

On my clients website I'm using the J51_Kaylee template.
On the homepage in the bottom-2 position there are short introductions of the therapists.
In time the number of therapists have grown from two to five, so now I use the bottom-2a up to bottom-2e position.
On smaller screen sizes, especially on tablet, the modules overlap eachother.
Can I make a media query for this so that if the screen is smaller (tablet size) the modules stack beneath eachother?
Thanks!
Greetings, Ton

Responses (2)

Mol4

Accepted Answer Pending Moderation

Votes

Undo

Hello Ciaran,

Thanks for the update.
I had to use new (custom) modules because I can't test it here (because everything works fine on my systems).
My client is a bit in a rush so testing will take to much time, sorry.
The new modules work fine she says so I leave it with this.
Thanks for your time!
Greetings, Ton

more than a month ago
Commercial Templates
# 1

ciaran

Accepted Answer Pending Moderation

Votes

Undo

Hi Ton

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width:1200px) {

 .bottom-2 {

  width:33.3% !important;

  max-width:33.3% !important;

  flex-basis:33.3% !important

 }

 @media only screen and (max-width:960px) {

  .bottom-2 {

   width:50% !important;

   max-width:50% !important;

   flex-basis:50% !important

  }

Ciaran

more than a month ago
Commercial Templates
# 2

Page :
1

There are no replies made for this post yet.
Be one of the first to reply to this post!

Please login to post a reply

You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »

Forgot Password?

Media queries for bottom 2 position

Site Links

Recommended

Join Our Newsletter