I'm familiar with Bootstrap and how to make it show/hide objects via responsive classes. However, Stencil appears to use it's own class names, and I'm unable to find reference to them. I have found some Stencil documentation, but I can't find this in it.
I'm using the theme Exhibit and found in the sidebar code that I can make an object appear in the drawer on small screens by declaring class="drawer-item drawer-extras". I can't find what is needed to make an object disappear from the sidebar, so that it is not in the drawer on small screens.
You can add css to hide or transform these items by saying something like
#media (max-width 768px) {
.drawer-item {
display: none;
}
}
For information on nesting these media queries, you can check Using multiple #media (max-width) CSS
Related
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I'm learning how to style React components and use npm to import libraries that i can use to do different things. I have imported react-shadow-text and tried to implement a simple h1 with text shadow. When attempting to style it, all of my styles work but when I center the text within the component, the shadow does not center along with the text. If i do not center the text and i resize the browser. the shadow stays with the text as you would expect but as soon as you apply justify-content, text-align, or any centering property to the component, the text will center itself but the shadow remains to the left and the shadow does not stay in the center with the text and instead remains to the left during resizing, making itself further away from the text.
I have tried using flexbox centering and i've also tried without flex. I've also tried to style the component with different styling techniques such as css modules and inline styles. I'm sure it's something simple, but i can't really find anything on the issues specifically regarding this particular library without using native.
import React, { Component } from 'react';
import ShadowText from 'react-shadow-text';
import styles from '../Name.css'; //imported stylesheet working
import styled from 'styled-components';
//import styles from '../Name.css';
class Name extends Component {
render() {
return(
<ShadowText className="name" theme={{
shadowTextColor: 'Black',
shadowTextShadowColor: 'Black',
shadowTextShadowBlur: '6px',
shadowTextXTranslate: '0px',
shadowTextYTranslate: '15px',
textShadowOffset: '0px', //tried messing with this
shadowTextTransitionDuration: '0.4s',
shadowTextTransitionTiming: 'ease-in-out',
}}>
Larry Young
</ShadowText>
);
}
}
export default Name;
And CSS
.name {
font-size: 2.5em;
font-family: 'Cinzel';
width: 100vw;
height: 20vh;
text-align: center; //problem child. without this, text stays to the left
//but shadow attaches itself to text. When this is
//added, or justify content is added, text detaches
//from shadow effect. Positioning issue maybe?
}
I've tried using anchorShadow prop built in to the npm library and setting it to true and it just flips the text and the shadow and does the same thing, but the shadow stays in place and the text moves...I've also tried CSS Modules css.js as well and inline styles. I guess I could try using raw text-shadow css but it kind of defeats the purpose in learning this particular library. I assume lack of experience with React is what's biting me. Thanks everyone.
I have noticed that when the react-text-shadow library adds the shadow, it does so in a seperate div that is absolute positioned. If I take away the positioning in dev tools, the shadow leaps to the center. So i tried isolating that class in index.css in the create-react app environment and changed the position value. When doing so, it worked, until I tried to edit the shadow offset to line it up more precisely. As soon as I changed the properties to control shadowTranslateXorY and reload, it generates a new class for the shadow, which negates the positioning change I made in the master index.css file. For now, I will just use CSS text-shadow. Putting text-shadow into the css file for the component, importing it into the component, and referencing to it with className is working fine. Hopefully someone else knows a little bit more about this particular library. I can't seem to find much documentation about it, aside from what is on the NPM page when you install.
We are working to make one of our responsive sites more accessible, but are struggling to get our heads around ARIA as it seems to go against the core principle of separating design elements from the HTML.
For example if an element is hidden in aria one would indicate it as aria-hidden="true". However most visibility is determined by media queries depending on screen size etc.
In other cases elements work completely different based on media queries. So at some sizes aria-haspopup="true" would be appropriate while on other resolutions the navigation is always visible.
Am I missing something, or are we at font tags all over again with this standard? Are we supposed to add / remove aria tags using javascript as appropriate?
Actually Kenneth, your question makes a lot of sense, and, yes - tooling for responsive sites is not ideal. I don't have an answer for you, but what I have to say is too long to be a comment...
Consider the following example:
You app has a menu button that opens a side drawer using a short sliding animation. Without a11y considerations, your job is easy (lets assume the drawer is on the left and has a width of 250px):
#media ... (min-width: 1000px)
#drawer {
left: 0;
}
#media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not an exact syntax, add your own wizardy for the sliding animation)
To make this accessible, you'd have to do one of the following:
option 1
Don't use aria-hidden='true'. It's generally enough to hide the drawer using visibility:hidden or display:none. Of course, now you need to wait for the end of the sliding out animation to hide the drawer (or you
lose the animation).
option 2
Use aria-hidden='true'. You'll have to catch window resize and add / remove aria-hidden='true' when switching sizes (you lose the media query magic).
To sum things up, you're right. There's definitely room for improvement. This is especially true, considering the general shift to move stuff off of JS to keep things 60fps smooth.
You have to use the window.matchMedia function
For instance:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
Using jQuery for instance, you can use the :hidden selector with a custom CSS class to set the aria-hidden attribute dynamically:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
The use of the custom class make it easy to match the elements which would change based on your media queries
How can I make inline Images ( Images used in the text of article ) responsive in Drupal 7.( I use Wysiwg and CKEditor). I can make Image Field files responsive with Adaptive Image Module but apparently it doesn't have any option for doing such action for inline images.
Other module like Picture and some thing like that make Image styles for different styles of theme( breakpoints indeed) but I want to make may image adaptive with all resolutions in other word I want all of my images be fluid, not conditional.The http://www.fastcompany.com have the best image styles in my opinion and I want exactly this behavior for my project.
For more information I studied all forums in Drupal.org about this issue but I can't find any reliable solution.
TNX
Add this to your css (make to fit your own css rules for wanted images):
img {
width: 100%;
max-width: 100%;
}