I have a progressive web app developed in reactjs and in this
I am using banner images which look good on mobile view, but when I switch to laptop view the banner images look big.
I tried to set the height property, but the image looks squeezed on laptop view.
The CSS code for the same is pasted below
banner-container {
padding: 20px;
margin-top: 45px;
.banner-img {
max-width: 100%;
height: auto;
}
}
#media (min-width: 767px) {
.banner-container {
padding: 20px;
margin-top: 200px !important;
max-width: 100%;
.banner-img {
width: 100%;
height: auto;
max-height: 300px;
}
}
}
What is the best way to display banner images which look good on both laptop and mobile view
You can easily manage your banner image with this css property:
object-fit: contain
Or you can look into different values of object-fit in this doc:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
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
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);
}
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
My Drupal site takes a while to load, and while it's loading everything looks messed up. So I opted for a simple solution that it's using a loading screen with this kind of solution:
Display a loading bar before the entire page is loaded .
But I have no idea how to implement it in Drupal 7.
Can you please help me with some clues?
Thank you!
.ajax-progress-throbber {
z-index: 1500;
border: 2px solid #C0C0C0;
position: fixed;
background: url('loader.gif') no-repeat center #ccc !important;
opacity:0.6;
padding:20px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
width:100%;
min-width: 100%;
height:100%;
left:0;
top:0;
}
I have done like this by putting this code in my css file and used a loader.gif image which is laso in the same folder where my css file is and use that class . Basically i use loader image every time i trigger ajax. You can use it as you want with according to different class.