Placement of objects by device

[pepetorreslacamara]

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.

[David Martin – Support]

I cannot access your site:

[pepetorreslacamara]

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.

[Rui Guerreiro – SUPPORT]

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

[pepetorreslacamara]

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.

[David Martin – Support]

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%;
}
}

[pepetorreslacamara]

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.

[David Martin – Support]

Put the code in Theme Options => Custom CSS.

[pepetorreslacamara]

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.

[David Martin – Support]

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

[pepetorreslacamara]

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.

[David Martin – Support]

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%;
}
}

[pepetorreslacamara]

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.

[David Martin – Support]

Glad to help you out!

Thanks,
David