I made a website using an HTML5 template and adjusting it. Everything worked fine so far (apart from probably having messy files).
Now, my issue:
I am using a parallax background image inside a section-element, and it is not responsive on mobile. If I resize my browser window, it works fine. But if I look at the actual size on my smartphone screen, it's not working.
This is the code I used in my CSS-file. I tried to do it with code that I found in this community and merged it with what was already inside the template.
.wrapper.rechtsgebiete {
background-color: #ffffff;
color: rgba(255, 255, 255, 0.75);
padding: 10em 0 6em 0 ;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
background-attachment: fixed;
background-color: rgba(51,153,255, 0.80);
background-image: url(../../images/la-rechtsgebiete.jpg);
background-position: top left;
background-size: cover;
border: none;
min-height: 50vh !important;
position: relative;
text-align: center;
width: 100%;
}
This is the HTML-element:
<section id="rechtsgebiete" class="wrapper rechtsgebiete" style="padding-top: 30vh; padding-bottom: 25vh;">
<div class="inner"><center>
<h1 class="font-volkhov2"><span style="color:white;">Services & Rechtsgebiete</span></h1></center>
</div>
</section>
Here you can see the issue; the first header-image works fine, everything else doesn't: http://lexadvice.de/leistungen.html
How can I solve this issue?
I tried changing the position value, but I guess it might have something to do with the width-property. Trial and error did not get me far this time.
I solved the issue with setting the background on scroll. Now the images are displaying correctly on iPhone.
background-attachment: scroll;
Thanks for your help #Akash Shrivastava.
One of the media style rules is overriding the background-attachment: fixed; in file: leistungen-banner.css
#media screen and (max-width: 1280px)
#banner {
padding: 6em 0 3em 0;
background-attachment: scroll;
}
}
that's why its not working on mobile. Please fix that.
Alternatively you can add and inline rule background-attachment:fixed to your #banner element.
Refer below screenshot (taken from chrome dev tools):
Related
I am trying to take this simple page with text on the left and an image on the right and add a media query so that the image fades to the background and becomes very light behind the text. I have tried adding linear gradients but nothing seems to be working. I set the image to display none at first thinking i would just add it again as a background image after since css moves from top to bottom but that just made my screen background white. Then I added this linear gradient which is not working at all although it is showing up in dev tools and not crossed out or anything.
I tried setting home-img to display none and then adding background image to body or section.
As you can see in the first image, it looks fine. The second is where I am having trouble with the code. I would like the background to be very light so you can read the text. Attached are my code snippets.
I tried editing home-img in the media query.https://github.com/aloha-suzanne/propelagency
HTML:
<section class="home">
<img
src="images/home-img.jpg"
class="home-img"
alt="man in striped shirt sitting on a bean bag chair while typing on his laptop"
/>
<div class="home-content">
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
Get started
</div>
</section>
CSS:
section {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
padding: 100px;
margin-top: 60px;
}
section.home {
flex-direction: row;
margin-top: 0;
}
.home-img {
position: absolute;
bottom: 0;
right: 0;
height: 110%;
}
#media (max-width: 995px) {
.logo {
top: 10px;
left: 40px;
font-size: 1.5rem;
}
section {
padding: 100px 40px;
}
.navigation ul li a {
font-size: 2rem;
}
section {
background-image: linear-gradient(
rgba(255, 255, 255, 0.561),
rgba(255, 255, 255, 0.561)
),
url(images/home-img.jpg);
background-size: cover;
}
}
#media (max-width: 680px) {
h1 {
font-size: 1.5rem;
margin-top: 150px;
}
.home-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
I've tried setting the home image to display: none and then adding it again as a background image with a linear gradient. That is making the background appear gray but not applying the image.
I think your linear gradient syntax isn't quite correct. This gradient generator is excellent for creating gradients which work.
section {
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
background-size: cover;
width: 300px;
padding: 10em 1em 1em;
}
<section>
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
<p>Get started</p>
</section>
I'm trying to recreate a math game for a University project with HTML CSS and JS. During the layout, my flexbox items are going outside their container. I gave them a thick border so it is easier to see what is happening. I'm trying to design it first for mobile as I show in the picture below.
See the screenshot here
.container {
display: flex;
flex: 1;
flex-flow: column wrap;
justify-content: center;
align-items: center;
margin: 1em;
border-width: 5px;
border-style: solid;
border-color: red;
}
.flex-item {
align-items: center;
justify-content: center;
border-width: 5px;
border-style: solid;
border-color: rgb(0, 255, 64);
}
Here is the full code in codepen
What I'm doing wrong?
The issue is the gap in your grid. You need to account for the 0.5em padding added on both sides of your element. To do this, you can use the CSS calc method. Set the width of .answer-options to calc(100% - 1em);, 1em being what you get when you add the .5em and .5em on either side of your grid. You're subtracting that 1em from the 100% width.
in .container I changed margin to padding and the problem got resolved.
I have a div I want to fill entirely with a background image. The salmon color should be not be shown. How do I get this image to "zoom to fit"? I've tried various methods such as background-size: 100% 100% and flexbox.
https://codepen.io/2spacemilk/pen/zYKWLyM
.this-div {
background-color: salmon;
display: flex;
flex-direction: column;
align-items: center;
background-image: url('https://i.imgur.com/6aRX4Hh.png');
background-size: cover;
}
.payment-methods-strip {
background-color: #fff;
max-width: 438px;
border-radius: 40px;
padding: 10px 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
The problem appears to be that your background image has transparent space on its top. Thus, the image is being displayed, it's just being pushed down by the extra invisible space. Could you try removing the extra space from the image (using an image editor)? If not, you can try to use background-position to manually position it to the top.
I am having issues with coding the home page of my photo grid exactly like this one here:
If you check out my code here:
You can see that the top two images of the first row are distorted. I would like the full photo grid to show up in both my tablet and desktop version of my site but I'm currently having issues with resizing the images.
May someone help me please?
I've already tried setting the width to 100% and height to auto and it didn't work.
#media screen and (min-width: 768px) {
.top-section {
display:flex;
width:100%;
height:100%;
}
.section-one img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
.section-two img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
The centering of the images in your first example is realized through javascript (maybe you noticed it, anyway...)
I would make these edits: you don't need to use display:flex (or at least I guess so), .top-section must always have width: 100% (remove the media query on it); add to .section-one and section-two another class, maybe .section-box with this properties
.section-box {
height: 70vh;
width: 100%;
}
#media screen and (min-width: 768px){
.section-box {
width: 50%;
float: left;
}
}
then, add to .main-image
.main-image{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
and remove the img tag inside each .main-image div; you will display the image setting the background-image property, for example
.section-one .main-image {
background-image: url("img/baja-hero.png");
}
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!