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.
Related
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.
Display Flex bug
I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.
#autocomplete a {
font-weight: bold;
text-decoration: none;
color: #111;
padding: 0.2rem 0.5rem;
border-radius: 20px;
align-items: center;
display: flex;
}
#autocomplete .fa.fa-search {
padding: 5px;
float: left;
}
without Flex and content-aligin: center;
with Flex and content-aligin: center;
you can try using "flex-direction: row-reverse;" it should reverse your items inside the container with the display flex applied.
have a nice day and good luck 😁
My approach would be like this:
Add the following CSS definition:
#autocomplete a * {
vertical-align: middle;
}
The "bold" text is outside a span or similar element. You should also put it into a <span>, so the correct style will be applied to it.
Example:
<a href="./search?q=abcdef&source=autocomplete" data-index="1">
<span class="nobold">abc</span>
<span>def</span>
<i class="fa fa-search"></i>
</a>
(The span around def is the new one.)
Explanation:
The * in the CSS definition in 1. will make the style apply to the selected element and all its children. So, in 2. you just add a matching "child" by using the span. I've tested it and it works for me.
Hint: I don't know if you know about this technique, but you can always use the browser's development tools in order to try such things "on the fly" within the page being shown.
Okay i am working on this and the Ori Guy add me some Idea and i make this code
justify-content: flex-end;
flex-direction: row-reverse;
And look is working :D
Really Thank all who help ME!! THANK YOU <3
So I am trying to change the css of the header element of the nebular theme in angular
It looks like so
I want it to look like this
I am trying to separate the two elements (the "MyApp" and the actions bar). Through the console I found that I had to change the "justify-content" of the nav element embeded in the nb-header-layout to "space-between". Here is what I did
html:
<nb-layout-header class="header1">
<app-header></app-header>
<app-actions-bar></app-actions-bar>
</nb-layout-header>
css:
.header1 nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
}
But the changes doesn't apply. Why? And how should I do it?
I looked into not using Nebular’s layout header but it seems like nebular is forcing you to use it otherwise it is not displayed.
did you make sure the CSS loading order is correct? If one component has shared CSS in two different files, the older one will rewrite by the newer one
I think your CSS not applying can you please replace your CSS like this:
.header1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
}
I'm a little late, but try using ::ng-deep
It can be used to force your styles down to a child element, useful in this case because the element you want to apply styling to, the nav, is not included in your markdown. For example:
::ng-deep nb-layout-header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
}
Relevant StackOverflow post here.
I am working on my project from last week and I am not sure that the first two links in my header are hyperlinking back to the index.html (home) and the about.html (about) of my GitHub repo. Also, how can I make the words links without the hyperlink markup decoration of underscore and blue text, (I need them to go to an address but appear as normal black text).
At first I just had them anchored into a nav section but then was toying with a nav-bar set-up and I checked mozilla and w3 but am not finding how to get them the way I need.
<nav>
<div><img src="https://github.com/paulrt/Sprint-Challenge--User-Interface/blob/master/img/lambda-black.png?raw=true"></img>
</div>
<nav class="nav-bar">
Home
About
and here is my css, it has a big hole in it cuz I am stuped
header nav {
width: 65%;
display: flex;
justify-content: flex-row;
align-items: center;
padding: 20px 2%;
font-size: 14px;
font-color: black;
}
header nav about {
}
nav {
margin: auto;
padding: auto;
border: auto;
display: flex;
align-items: center;
justify-content: space-around;
color: black;
I need the Home and About button to go to the referenced pages, respectively but also appear as normal non-hyperlinked text. Any hints or advice would be greatly appreciated, (and I am like prenatal that is how much of a noob I am so go easy on me if I didn't format or minimize properly please).
The CSS for getting rid of the underline of links and changing their color would look something like this:
a {
text-decoration: none;
color: black;
}
Note the a selector would affect all anchor tags, so you may want to specialize it with a class attribute specific to those links:
<a class="plain-link" href="...">Link</a>
a.plain-link { ... }
Also, another problem you may be facing is your CSS in the original post is only affecting content in <header> and <header><nav> but not <header><nav><a>, So plain text elements like <span> or <p> would be black, but not links which default to underlined and blue in pretty much all browsers.
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.