I'm programming a responsive menu, however I used "focus" - so when I click it doesn't go to where I sent the link, only if I tab to it. How can I solve it?
button:focus ~ .nav-item{
height: 330px;
}
#media only screen and (max-width:1117px) {
.nav-item{
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
height: 0;
}
}
You can find a list of all events here: https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
Pick the one (or multiple) that fits your use case. Especially if you're developing for desktop and mobile, you might need mouse and touch events.
Related
My spans with hover work on a tablet (my iPad) and desktop computer. However, on my phone the CSS styling disappears, while I understand that hover effects don't really "work" on phones/touch screens but part of the CSS is hiding the span when not hovered over.
HTML:
<section id="proj1">
<a href="EJ.html">
<img id="c" src="img/rjcover.jpeg">
</a>
<span id="one">
Envisioning Justice
<br>
<br>
May 2020
</span>
</section>
CSS:
span {
display: none;
position: absolute;
font-size: 10px;
padding: 5px;
text-transform: uppercase;
z-index: 1;
font-family: 'Darker Grotesque', sans-serif;
font-size: 25px;
background-color: #FAD714;
color: white;
width: 75%;
margin-top: -190px;
}
#proj1:hover #one {
display: block;
}
#proj2:hover #two {
display: block;
}
#proj3:hover #three {
display: block;
}
#proj4:hover #four {
display: block;
}
http://iam.colum.edu/students/riley.jakusik/designbyriley/
that is the link to it live.
You should always take into consideration what will create the best user-experience. If you are setting display:none on your span element and then displaying that element on hover you are creating a situation for users who are on a device that does not support the hover state that will not be the best experience for them. One possible solution would be to use a hover media query. This way you can specify styling that will apply to users that are on a device that supports that feature, and if not you can specify a fallback for users that are on a device that does not:
#media (hover: hover) {
#one {
display: none;
}
#proj1:hover #one {
display: block;
}
}
The CSS #supports rule will also be a useful tool to familiarize yourself with.
EDIT: And thank you to #SandeshSapkota for pointing out that hover state is still supported in many mobile devices, but I think that it is useful to familiarize yourself with the aforementioned hover media query as it is a useful tool in many situations. A better approach to your issue may be to instead implement a media query that tests for viewport width, and if it is smaller than say 641px, which is the value that Foundation uses to detect mobile devices then just show the span element by default:
#media (max-width: 641px) {
#one {
display: block;
}
This query means that if the device in question has a viewport width at a maximum of 641px then apply the styles.
I have a webpage with some dynamically generated content, on that page I have a big div (We'll call this the container) containing other divs (We'll call these groups), each of these divs (Groups) contains a number of input fields. (How many is not known in advance, but I could limit it to something like 1-10).
I need every input in a group on the same line, so no linebreaks (If that term is correct in this context) in a group. There can be as many groups as fit in one line, but the first input on a new line always needs to be the first input in that group.
Currently I have most of that working, except for the whole line breaking thing. Here is a picture of the current situation.
As you can see, the groups are broken up, the last 3 inputs on the first line should already be on the next line.
Is there a way to disable this line breaking behaviour for all elements in a div while maintaining the ability to break up multiple of these div's?
Here is an example on codepen.
Here is the css I have so far:
.number-fields input {
width: 1cm;
text-align: center;
}
.number-fields-input {
margin: 5px;
}
* {
background-color: #2F363F;
}
.form-control {
color: lightcyan;
display: inline;
background-color: #2F363F;
}
#number-fields {
padding-right: 5vh;
width: 100%;
}
.input_group {
display: inline;
padding-right: 5vh;
}
Try using flexbox here with flex-wrap:wrap on the container and flex-wrap:nowrap on the groups of inputs.
.container {
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
}
.input-group {
display:flex;
flex-wrap:nowrap;
justify-content:flex-start;
}
I have an app that fetches videos, and it creates a card for each video that it fetches, on the card there is also the video title, video creator, video link, video download link, views, and the upload date.
I am fetching all of these things with no problems and they all display the way I want it to, for the most part.
The strange thing is for some cards, the text for download and view video is mispositioned, and is higher than it is supposed to be.
Here you can see the problem I'm experiencing, basically the first and third cards are displaying correctly but you can see that the middle card's text for download and view is higher for some reason.
the following is my css for the cards
.card {
background-color: $secondaryColor;
border: 3px solid #fff;
outline: black solid thin;
}
.authorInfo {
display: flex;
}
.card-body {
display: flex;
justify-content: space-between;
margin-bottom: -10px;
}
.card-footer {
display: flex;
justify-content: space-between;
}
.watchComp {
display: flex;
}
.dlComp {
display: flex;
}
.card-deck {
padding-bottom: 1.5rem;
}
the dl comp consists of the icon and the link, same with the watch comp. I have tried altering the positioning styling in the inspect element when this happens but nothing has worked.
Any ideas on what could be causing this? the cards I'm using is from react-bootstrap, if that matters.
Watch Clip and Download Clip in the second screenshot snaps top because title has only one line toxic. You can wrap that row in a <div> tag or use align-items: center style.
I am trying to change the colors of three blocks on the main page of my SquareSpace site: the very top black block and the two orange blocks farther down the page. Developer mode is enabled. (ignite.lifepacific.edu)
I inherited this site from someone who is much better at CSS and web dev stuff. I can't even seem to FIND the code that I need to edit to change these properties, I have tried inspecting the site and going through the template files with no luck yet.
I have tried editing the custom CSS for the site. I was successful in changing the background color of the very top black block by editing the site-wide css, but not the font color.
Here is the site wide CSS, but I am not even sure that this is where the problem is: (I apologize for the amount of code, but I can't tell what code would be helpful to post!)
// Full-width content
.index-section.page .index-section-wrapper .content.page-content {
padding-top: 0 !important;
}
.index-section.page:first-child .content.page-content {
padding: 0 0 50px !important;
}
.index-section.page:nth-child(4) .content.page-content {
padding: 0 !important;
}
.index-section.page:nth-child(2) .col .row.sqs-row {
padding-left: 17px;
padding-right: 17px;
}
//very top black block
#ign-quickNavWrapper > span{
display: none;
}
//pictures at the bottom of main page
#media only screen and (max-width:640px) {
#block-yui_3_17_2_3_1480364802859_23283 {
display: none;
}
#page-583c7ead9f7456d4fb558775 .row.sqs-row .col.sqs-col-12.span-12 .row.sqs-row {
margin-bottom: 3.2em !important;
}
}
//block with colored text
#block-d65e6f0e47ed22f827df {
background-color: #6d6d6d;
padding: 20px;
}
#block-d65e6f0e47ed22f827df p{
color: #ffffff;
}
// 6.22 update centering logo and navbar
.header-inner{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#header #logoWrapper, #header #logoImage{
width: initial;
margin-left: auto;
margin-right: auto;
}
I have tried inserting the below, which successfully changes the top block color, but does not change the font.
#ign-quickNav {
background-color: white;
color: black;
font-color: black;
}
The following CSS, inserted via the CSS Editor or as part of the stylesheets in your developer-mode template will accomplish what you're after:
#ign-quickNav {
background-color: white;
}
#ign-quickNav a, #ign-quickNav a:hover {
color: black;
}
#block-yui_3_17_2_1_1557948879558_24889 {
background-color: #001a47;
}
#block-yui_3_17_2_2_1480363068238_30015 {
background-color: #001a47;
}
It may be that, by reviewing the above CSS, you can instead find the rules in the existing CSS and edit them, rather than adding additional rules. However, depending on the intended goals (and expected life of the website in question), adding more rules may be fine.
Because developer mode is enabled, it could be that you will not find the CSS within the CSS editor, but within the template files, within the styles folder. To access these files, you need to use SFTP or Git.
However, to simply achieve the styles you're looking for, you should be able to add them via the CSS Editor.
Note that, when targeting blocks via ID as I have in the code above, it is important NOT to target blocks starting with "yui". Such IDs are dynamically generated, so your CSS will not work as desired.
In writing the CSS above, I used the default web inspector, located block IDs, and looked for where existing CSS rules were that were defining the colors in the "quickNav". I hope that gives you a bit of insight on the process.
I used flexbox properties to make my section look like this:
It works fine on Chrome but I noticed a few differences when I checked firefox and safari.
This is how chrome looks like:
But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:
And on safari, the boxes are all one after the other:
It is a WordPress Site and not live yet. But here is my html structure:
<section id="services">
// here goes the title of the container
<div class="main-container col-lg">
// here go all the box
<div class="services-container">
// this one of the boxes
</div>
</div>
</section>
And the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How Can I make this work on all browsers?
The best way to ensure that flex is working equally on all browsers is to use prefixes.
Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Sometimes the HTML version may be the reason (it was in my case):
I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.
Good luck...