Breadcrumbs positioning across devices [different screen sizes override]

Tagged: , ,

Author Posts

vm0572 October 26, 2015 at 11:56 pm

Hi, I am resubmitting my question since the forum could not take questions.

Can you explain (or guide me to any existing tutorials) on using the different tabs for desktop, tablets, and phones?
I was trying to position Yoast breadcrumbs across all devices; but if I positioned it the way I wanted using “position” and padding/margins on say the “All Devices” tab, then made adjustments to the “phone” tab…as soon as I clicked back on the “All Devices” tab..the breadcrumbs moved. Meaning the changes did not stay. How do you ensure the breadcrumbs (or anything) for that matter stays exactly where you placed it via position, padding/margins across all those tabls? Is that achievable?
I must be doing something wrong and simply need guidance.

Thank you.

Sebastian October 27, 2015 at 12:21 pm

Hey, sorry about the forum problems last week. Could you post a link to your website please? Or better still, if you send me login details for your WordPress install I can set up the tabs for you by way of example. And then explain the thinking behind it here in the forum. You can use this secure contact form:

https://themeover.com/support/contact/

But if you’d prefer to just send a link to the page you’re working on I can explain the process purely in words.

Cheers!
Sebastian

vm0572 October 28, 2015 at 12:39 am

Here is the link:
http://www.contrx.com

I’m using text-align now. But I would be curious as to how one would go about making sure positioning using position or padding/margin would stay across all the tabs using your plugin. For example, I would want the breadcrumbs to be aligned with padding from the row beneath.

Thank you.

Sebastian October 28, 2015 at 9:58 am

Hey,

I’ve just reread your initial question, and I think the answer might be fairly simple – if I’m understanding you correctly. I’d first like to clarify. Are you saying that you expected the changes you made via the Phone tab to still be visible when you went back to the All Devices tab (full width screen)? If so, this is based on a misunderstanding.

The styles you apply via the Phone tab will only take effect on screen sizes below 480px wide (because the Phone tab media query specifies that). That’s why the preview in Microthemer shrinks down to 480px wide when you click the phone tab – so you’re always viewing the site at the size in which the screen width specific styles will take effect. When you go back to the All Devices tab, Microthemer sets the preview screen to the full width of your computer. And as this is (normally) larger than 480px, the styles you applied via the Phone tab do not apply. They’re not meant to apply. But they will apply for users viewing your site on small devices like phones.

Have I understood your question correctly though?

Cheers,
Sebastian

vm0572 October 29, 2015 at 1:39 am

Hi Sebastian,
Thank you. I think I better understand the concept of the tabs. Just to clarify. Let’s say for example I want the breadcrumbs (or anything) to be placed in a certain position or show an image at a certain percent (as in your video) for a specific screen size, changes I make under that tab will show onlly for that screen size. Correct?

I noticed that if you hover to the top right corners of the ruler, you are presented with different sizes for all types of devices. Are those for references only, or if I make a selection, changes will take effect for that size screen? Or do I need to create a new media query for the screen size I selected (for example the Iphone 5) for changes to stick.

Lastly, can you explain how the “min” and “max” for width and height work?
Thank you. Your assistance is greatly appreciated.

Sebastian October 29, 2015 at 10:59 am

Regarding your clarification point – Yes. The conditions generally affect a range of screen sizes. So the Phone tab affects all screen sizes up to 480px (including 320, 380 etc) but not 481. The shading of the horizontal ruler reveals the scope of the media queries. The All Devices tab however applies style that will take affect on any screen size of course, as the name suggests (not just at full width). But you can override styles applied on the All Devices tab by applying screen-width specific styles on the other tabs.

The device previews are just for reference only. You can also drag the screen preview manually by dragging the horizontal ruler with your mouse. You don’t need to create a media query tab for every device. Customise the min/max values of the defaults if you like. And maybe add a few more if you like. But you shouldn’t need to have more than about 8 media queries (in general).

Do you mean min/max-width/height of media queries? Or the min/max-width/height CSS properties in the UI?

Cheers,
Sebastian

vm0572 October 29, 2015 at 2:52 pm

I mean the min/max widht/height of media queries.

Thanks.

Sebastian October 30, 2015 at 6:52 pm

Take this media query:

@media (max-width: 480px)

This basically says “only apply styles on screens that are up to but no more than 480 pixels wide”.

You can also use multiple conditions to specify a range of qualifying screen widths:

@media (min-width: 768px) and (max-width: 979px)

This basically says “only apply styles on screens that are more than 768 pixels but less than 979 pixels wide”.

Width refers to the horizontal width of the screen, while height refers to the vertical height of the screen.

vm0572 October 31, 2015 at 3:28 pm

Thank you for all of the clarifications. Much appreciated!

You must login or register to reply to this topic.