Docs

[dominicobrien]

Hi,

I am trying to make my site mobile friendly. I would like to keep the same menu design as the desktop version of the site, but it changes when used on a mobile. Is it possible to do this?

Also i’m not happy with the size and position of the images on the mobile site. but i don’t seem to be able to edit this in visual composer. I should be able to select the type of device in the top menu and then adjust the size and layout of the columns etc but this option seems to be missing. I have been through the x integration settings and made sure all the controls are available for visual composer.

How can i do this, if it is not possible what is the best way to make the images i have added responsive.

Thx

[dominicobrien]

The address of my site is http://www.ctrlsoundacademy.com

[dominicobrien]

Ive been looking at this further …. So it seems the images are responsive because as i reduce the screen size they also reduce in size .. However when i get to a certain point (to something simular to an iphone screen) all the images increase in size and take up the whole page .. is there anyway i can stop this happening so that they just keep reducing evenly?

[Nabeel A]

Hi there,

Thanks for writing in! You can try adding the following code in your Customizer via Appearance > Customize > Custom > CSS:

@media screen and (max-width: 767px) {
.x-column.x-sm {
  float: left !important;
}
.x-column.x-1-3 {
  width: 30.66666% !important;
}
}

Let us know how this goes!

[dominicobrien]

This reply has been marked as private.

[Paul R]

Hi,

Sorry about that.

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
.x-column.x-sm {
    width:50%;
    padding:2%;
}
}

Hope that helps.

[dominicobrien]

Hey there, thanks for your help…

The second code you sent over doesn’t seem to change anything. However i noticed the first code does actually work on some of the images on the page. If you check out the website (www.ctrlsoundacademy.com) you can see that he course images are changing but the DJ images are staying the same now and work well.

Is there a way to make all the images behave like the DJ images?

[Rue Nel]

Hello There,

Upon checking your site, we could not see that you added the second code we gave you. The DJ images is a 3 column arrangement on larger screen, if you want to display 2 columns on smaller screens, you will have an extra empty space to right of the second row of the DJ images.

Please try to use this code:

@media (max-width: 767px) {
 .x-column.x-sm {
    width: 50% !important;
    padding: 2%;
 }
}

The code forces the columns to display 50% in width or 2 columns.

Hope this helps. Kindly let us know.

[dominicobrien]

Hi … Thanks for looking … I’m actually happy with the way the DJ images are already. I just want the course images above to behave in the same way (downsize to a smaller screen, but keep the same layout). Is this possible?

Thx

[Rad]

Hi there,

Yes, that’s possible. You may use block grid instead of columns 🙂

But if you still preferred of using columsn, then add this css too

.fixed-column .x-column.x-1-4 {
  width: 22% !important;
  float: left !important;
  margin-right: 4% !important; 
}
.fixed-column .x-column.x-1-4:last-child {
  margin-right: 0 !important;
}

Then add fixed-column to the content band’s class attribute/option where it wraps your courses columns.

Eg. [content_band class=”fixed-column”]

Cheers!

[dominicobrien]

Hey 🙂 thats great .. i fixed it! Thank you for your help

I’m nearly there now …… Is there a way to make the menu appear on mobiles just like in the desktop version?

[Rad]

Yes there is 🙂

.x-nav-wrap.mobile {
  display: none !important;
}
.x-nav-wrap.desktop {
  display: block !important;
}

Cheers!

[dominicobrien]

hi there … thanks for this .. unfortunately the left hand side of the menu has now disappeared off screen .. you can take a look on the website .. how can i fix this .. thank you!!!!

[dominicobrien]

hey, it would be awesome if you could let me know this now .. trying to launch the website today 🙂

[Thai]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0;
    right: auto;
}
}

Hope it helps.

[Author]

Posts