I have the requirement to expand the lightning component on whole screen.
I tried the css but that's not worked. But None of them working
.maincontent{
height: 100%;
background-color: deepskyblue;
}
html, body { height: 100%; }
body { background-color: deepskyblue; }
Please suggest the way to achieve it.
Current Page:-
[![Current][1]][1]
Expectation :-
[![Expectation][2]][2]
[1]: https://i.stack.imgur.com/iuI6K.png
[2]: https://i.stack.imgur.com/qLZhs.png
Related
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
Hope all are doing good. Apologies this is repeated or seems silly.
I have a functional styled component to render a input type image called LinkedInInput.jsx.
const LinkedInInput = styled.input`
left: 20%;
position: absolute;
top: 7%;
height: 6%;
font-size: 2.4vw;
background:url(${(props) => props.src});
#media (orientation: portrait) {
top: 10%;
left: 19%;
height: 6%;
position: absolute;
}
`;
This component getting rendered from the index.jsx like below:
```<LinkedInInput src={linkedInURL} type="image" onclick={linkedInLink}></LinkedInInput```
When this component rendered on webpage, I'm not able to see the onclick attribute on the input type and that is not clickable as well. Can you please tell me how to make sure that this component is clickable and opens the link.
Try changing onclick to onClick.
refer this.
https://reactjs.org/docs/handling-events.html
https://www.smashingmagazine.com/2020/07/styled-components-react/
tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.
here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js
thanks in advance :)
When using styled-component, the style would be applied with className sc-....
In your case, its style would be applied in div containing .slick-slider.
But, .ant-carousel is className for parent of that.
So, if it was included in the selector, style will be not applied.
Try this.
const CarouselWrapper = styled(Carousel)`
> .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 100%;
}
> .slick-dots li.slick-active button {
width: 7px;
height: 7px;
border-radius: 100%;
background: red;
}
`;
I've a big problem. Google Search Console doesn't correctly fetch my website. The website consist of five sections with parameters:
width: 100%;
height: 100vh;
min-height: 100%;
Google bot renders only first section, what about the others?
Add a max-height to 1080px for the element which has height: 100vh and leave min-height blank.
For example:
.element {
height: 100vh;
max-height: 1080px;
}
For us, this solved the issue within Google Search Console Visual renderer.
I am trying to add a banner above my fixed-top navbar. I have looked around and understand some basic concepts on how to do this but my example is a little more complex and I am getting a little lost.
User can add a custom banner to the top of my page. If this happens I need to push everything (including the fixed navbar) down the height of the banner (say 20 px).
I have created a class that I can apply to the nav element:
.top-banner-nav {
top: 20px;
}
Navbar:
<nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">
That works great to push the static navbar down 20px if there is a banner. However I have to problems.
When you have a static navbar like this you have to add a top padding to the body to push the body content below the banner. Now all of the sudden I would need to push the body content down 70px. Not sure if there is a good way to make this happen dynamically.
I have another static navbar directly underneath the very top navbar. When I move the very top navbar down 20px I need to move this other navbar down 20px as well. Unfortunately this lower nav is fixed as well with top: 50px to place it right below the upper navbar.
I have a plunker here that demonstrates the problem. And I am not really sure where to go from here. Might have to mess with things in javascript, but I would like to try and avoid that is at all possible to avoid things jumping around on page load.
http://plnkr.co/edit/DYYMz1?p=preview
I looked at your plunker. I made some changes to your CSS and HTML to accomplish what you are looking for. The change I made to the HTML was the body tag. The new tag looks like this:
<body ng-controller="MainController" ng-class="{'bodyModified': banner == true}">
The new CSS file looks like this:
body {
padding-top: 50px; Need this to move down body under fixed header
}
.bodyModified {
padding-top: 20px;
}
.settings-nav {
position: relative;
right: 0;
left: 0;
background-color: #E2E2E2;
z-index: 1029;
top:0px;
}
.settings-content {
padding-top: 70px;
}
.top-banner-nav {
position: relative;
margin: 0;
height: 20px;
}
.top-banner {
position: fixed;
right: 0;
left: 0;
top:0;
margin-bottom: 0px;
background-color: #FFFF00;
}
You can also use javascript and jQuery to accomplish this as well. Hope that helps. Let me know how it goes.
Here is a plunker demonstrating the changes
http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview
you can try jquery solution for this.for example if you are using top-nav-fixed-banner class you can code something like this.
function fixBannerHeight(){
var bannerHeight = $(".top-banner-div").height();
$(".top-nav-fixed-banner").each(function(e){
var height = $(this).height();
bannerHeight = bannerHeight + height;
})
$('.top-banner-div').css({"height":bannerHeight+"px"});
}
call fixBannerHeight() when you are adding dynamically banner.
Hope this helps.