ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• March 28, 2017 at 10:51 am #318758
  pepetorreslacamara

  Member

  Post count: 8

  Hi. I need my design to adapt to two rows for resolutions appropriate to tablets, laptops etc.
  In other templates, by reducing the navigation window, the elements are grouped progressively according to the width of the window. But I see that in the template dante this does not happen. I send a screenshot where it is seen as a row composed of four elements, is narrowing as the browser window is closed and those four elements, instead of grouping two up and two below, narrow to reach the minimum width Of a mobile device.
  Is there any way to get these items grouped two up and two down so it looks good on a laptop?
  Thanks a lot.

  Attachments:

  You must be logged in to view attached files.
  March 29, 2017 at 1:50 pm #318968
  David Martin – Support

  Moderator

  Post count: 20834

  I cannot access your site:

  

  March 29, 2017 at 7:32 pm #319033
  pepetorreslacamara

  Member

  Post count: 8

  Hi. I have asked in my internet provider and he has told me that due to its security policy, it is forbidden to access the wordpress administration area from non-Spanish speaking countries.
  I need you to tell me from what country you connect so that they give me permission to connect you from your country.
  Thank you.

  March 30, 2017 at 1:04 pm #319110
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  We are in Uk and Portugal.

  p.s- If a Spanish tries to see the website outside from Spain he won’t be able to do it. Just trying to understand if it makes sense.

  -Rui

  March 30, 2017 at 1:25 pm #319112
  pepetorreslacamara

  Member

  Post count: 8

  It is a security policy from my internet provider. And it only affects who wants to enter the administration of worpress, not to the visits to the web.
  Anyway, I have disabled the lock and now you can access without problems from any of these two countries.
  Thank you very much for your attention. And I hope you can solve the problem.
  A greeting.

  April 3, 2017 at 9:54 am #319372
  David Martin – Support

  Moderator

  Post count: 20834

  Add a custom class to the parent Row. Ex: mobile_column_mod.

  You can then use this:

  @media (min-width: 768px) {
  .mobile_column_mod .col-sm-3.border_colchon {
      width: 50%;
  }
  }

  April 3, 2017 at 12:29 pm #319407
  pepetorreslacamara

  Member

  Post count: 8

  Hi. Thank you for your reply.
  I added the code you sent me, but as you can see in the screenshots, it still does not adapt to a width of 50% for resolutions of less than 768 pixels. Something must be wrong, since the class created does not reach the element that has to adapt to 50% of the screen.

  I have worked with many other topics and this is something that many of them do without having to add custom code. If we have 4 elements in a computer view, the logical thing is that on a tablet are grouped two by two and a cell phone one at a time.

  I do not have great knowledge of programming and I would appreciate you to help me put the necessary code to get this.

  A greeting

  Attachments:

  You must be logged in to view attached files.
  April 3, 2017 at 1:21 pm #319420
  David Martin – Support

  Moderator

  Post count: 20834

  Put the code in Theme Options => Custom CSS.

  April 3, 2017 at 1:51 pm #319423
  pepetorreslacamara

  Member

  Post count: 8

  Hi.
  I followed your instructions but still does not show me the elements of two at two in tablet resolutions.

  Thank you

  Attachments:

  You must be logged in to view attached files.
  April 3, 2017 at 2:03 pm #319430
  David Martin – Support

  Moderator

  Post count: 20834

  Of course, you have not added the class mobile_column_mod to the Row. Please re-read my instructions.

  

  April 3, 2017 at 3:04 pm #319447
  pepetorreslacamara

  Member

  Post count: 8

  Hello again. Sorry for not understanding your instructions.
  Now I have done well. I have added the class “mobile_column_mod” to the row and the css seems to act, but instead of assigning a width of 25% in resolutions higher than 768 px assigns a 50%.

  Could it be done so that it will assign a width depending on the resolution?

  Resolutions greater than 768 px = 25%.

  Resolutions smaller than 768 px = 50%

  Resolutions for mobile = 100%

  Thank you very much and sorry for the problems I am causing you.

  Attachments:

  You must be logged in to view attached files.
  April 4, 2017 at 11:54 am #319549
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  You would use this:

  @media (min-width: 768px) {
  .mobile_column_mod .col-sm-3.border_colchon {
      width: 50%;
  }
  }
  @media only screen and (max-width: 479px) {
  .mobile_column_mod .col-sm-3.border_colchon {
      width: 100%;
  }
  }

  April 4, 2017 at 12:47 pm #319559
  pepetorreslacamara

  Member

  Post count: 8

  At last I have managed to adapt the content according to the device.
  I attach a screenshot of the code I have used and the results seen in the mozilla emulator.

  Thank you.

  Attachments:

  You must be logged in to view attached files.
  April 4, 2017 at 12:53 pm #319565
  David Martin – Support

  Moderator

  Post count: 20834

  Glad to help you out!

  Thanks,
  David

• Back to forum

  Posted in: Dante