I have one issue that cant resolve. I want to remove line that is between other two widgets in my site, and centralize the other 2 contact widgets. How to make this? The CSS from that widget that i want to remove is :
.footer-branding {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 30%;
float: left;
text-align: center;
padding: 30px 30px 15px 15px;
}
Image where is shown what line I want to remove.
Just adding some css for that:
.footer-branding {
width:0;
padding:0;
}
.footer-contact {
broder-left:0;
margin:0 auto;
}
Related
Does anyone know how I can get all the h4s in this pen to align? I'd like all the icons to be on the same line, and also the h4s to start on the same line as well. I've tried messing with the flex baseline property but no luck.
Each flex item has this css:
.grid-item {
flex-basis: 25%;
display: inline-block;
padding: 0;
width: 100%;
text-align: center;
}
https://codepen.io/jpaul1982/pen/RwBypMj
In your codepen , you need to change the block-grid to
.block-grid {
display: flex;
align-items: baseline;
gap: 5%;
}
I have placed two divs in a flex-direction row with a gap of 70px as shown in the figure:
In the above picture, we could see the date to be 8/12/22 but when we change the date to 12/12/22 the gap between the divs(i.e date and step counts) slightly increases due to the extra digit added to the date. This gives a very bad user experience.
Here is the code:
JS
<div className="DataAreaParent">
<div className="DataParent">
<span id="XAxisData" className="SpanText"></span>
<b className="BoldText">{props.xAxis} </b>
</div>
<div className="DataParent">
<span id="YAxisData" className="SpanText"></span>
<b className="BoldText">{props.yAxis}</b>
</div>
</div>
CSS:
.DataAreaParent {
display: flex;
flex-direction: row;
gap: 70px;
margin: auto;
padding: 10px 30px 10px 30px;
}
.DataParent {
display: flex;
flex-direction: column;
}
.BoldText {
color: gray;
}
.SpanText {
font-size: 1.5rem;
font-weight: bolder;
}
Please guide me on how the gap will not change even though digits in the date increase or decrease.
.DataAreaParent{
display: flex;
flex-direction: row;
# You can this line to set the auto gap between flexed container.
justify-content: space-between;
gap: 70px;
margin: auto;
padding:10px 30px 10px 30px;
}
It happens because of the fixed gap and the width is not assigned to .DataAreaParent.
Remove the fixed gap and add the width in .DataAreaParent like,
.DataAreaParent {
display: flex;
flex-direction: row;
justify-content: space-between;
/* gap: 70px; */
width: 100px;
margin: auto;
padding: 10px 30px 10px 30px;
}
Also, add min-width to date and align it to the left of its container. It will solve your problem.
.DataParent {
display: flex;
flex-direction: column;
min-width: 58px;
align-items: flex-end;
}
I am currently trying to get a site going with a sidebar style navbar, building in Next/React.js on VSCode.
I have managed to route successfully (Next makes this job pretty straightforward) but when I route to next pages, the page itself actually appears behind the navbar (see pic attached).
What do I need to do to get the content to automatically position itself in the remainder of available page?
(the text is aligned/justified center, so aside the navbar should appear in the centre of remaining space...)
centre offset image
NavBar CSS
.navBarContainer {
height: 100vh;
width: 275px;
background-color: black;
color: white;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 2rem;
}
.navBarContainer li {
list-style-type: none;
padding: 0.2rem;
display: flex;
justify-content: right;
}
.navBarItem {
font-size: 1.3rem;
}
.liHeading {
cursor: default;
font-size: 2rem;
margin-bottom: 1rem;
}
Contact Page CSS
.mainBanner {
background-color: blanchedalmond;
display: flex;
justify-content: center;
align-items: center;
height: 150vh;
margin: 0 0;
}
In my React app, I like to write CSS style within a style tag of a given TSX component. Is there a way to achieve VS Code syntax highlighting for CSS within this context?
Currently, the entire file reflects TSX syntax highlighting, which means the CSS string fragment is all a single color.
I am not using styled-components.
Below is an example of the text I'd like highlighted within the style tag content:
export default function HomeStyle() {
return (
<style>{`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
);
}
If you use a tagged template literal named css you should get CSS Intellisense & syntax highlighting. eg:
const css = String.raw;
export default function HomeStyle() {
return (
<style>{css`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
);
}
If you use a tagged template literal named html you should get HTML Intellisense and syntax highlighting. eg:
const html = String.raw
const template = html`
<div class="container"></div>
`
In these examples I’m using String.raw as a passthrough. Frameworks may provide their own html and css functions to use for this purpose that add framework specific features.
Using just CSS can somebody please show me how to add a drop down menu on the Big Cartel Neat theme.
Need help on adding subheading to the main heading for example...
About The Brand (hover mouse and subheadings appear)
Brands Philosophy
About the Founder
About Us
header .sections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0 32px;
position: relative;
width: 50%;
z-index: 97;
}
header .sections .navigation {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
header .sections .navigation li {
display: block;
margin: 0 16px;
}
header .sections .navigation li a {
padding: 4px 0;
text-align: center;
I'm new to CSS also, but I'll try my best to help. This is what you can do.
#heading:hover .subheadings{
display: block
}
Basically, your #heading id (You'll probably only have 1, so you should use id.) is the "About The Brand" text. When you add hover, you can make something happen when the mouse hovers over the main heading. In this case, you can add the class .subheadings right after it and display it as a block element (The 3 subheadings will be stacked on top of each other). This will cause the subheadings to appear after you hover over the main heading. Basically, it's like an if then statement in Python.
I hope this explanation helps! Good luck :)