Based upon the screen size, the whitespace increases/decreases between the image and blog title:
How can I make them touch at all times?
HTML
<img class="main-image" src="/assets/walking.jpg">
<div class="overlay-image">
<div class="blog-caption">
A DAILY BLOG ABOUT THE
JOURNEY & CHALLENGES
</div>
<%= render 'subscribes/subscribe.html.erb' %>
</div>
<div class="blog-page">
Blog post title & text.
</div>
css
main-image {
width: 100%;
position: relative;
}
.overlay-image {
position: relative;
text-align: center;
margin-top: -47%; # I think this is the main culprit, but I don't know how to edit without altering the position of the things on the image
height: 201px;
}
.blog-caption {
text-align: center;
font-size: 18px;
color: white;
margin-top: 0px;
margin-bottom: 18px;
padding-top: 8px;
background-color: rgba(44,62,80, 0.8);
padding-bottom: 8px;
}
.blog-page {
#media (max-width: 992px) {
padding-top: 0px;
margin-top: -40px;
}
}
Yes, as you already suspected: First remove the negative margin from .overlay-image. Then add position: absoulte to .blog-caption and adjust its position with the top and left settings.
Maybe you should look at z-index.
Then you can put the image into the container for the fancy text which is in the class .overlay-image yet.
With this, you get rid of those -x% margin. Maybe this can help you figure out the problem.
Related
There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
I have a header which looks like this :
I found an example of what I wan. On small screen i need the search bar to go underneath.:
The issue is that i have no idea how this is done. I tried changing the position to relative when i reach a certain screen width but this didn't help.
<div className="header">
<div className="header__logo">
<img src={logo} alt=""></img>
</div>
<div className="header__search">
<SearchBar />
</div>
<div className="header__right">
<FiUser className="header__icon" />
<Cart />
</div>
</div>
/*
header
*/
.header {
width: 100%;
height: 60px;
border-bottom: 1px solid #e4e4e4;
display: flex;
justify-content: center;
}
.header__logo {
width: 120px;
height: 60px;
line-height: 65px;
}
.header__logo img {
width: 120px;
background-size: contain;
}
.header__search {
width: 50%;
height: 60px;
line-height: 60px;
margin: 0 20px 0 20px;
text-align: center;
}
.header__right {
width: 120px;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.header__icon {
height: 30px;
width: 30px;
margin-top: 15px;
cursor: pointer;
}
I dont need you to code it for me i'm fine doing that myself, I just have no clue how to go on about this.
One option would be to create two search bars in the same file. And hide one and show other depending on screen sizes.
Somthing like this:
<select class="for-desktop"> ... </select>
<select class="for-mobile"> ... </select>
Then CSS would look like following:
#media(max-width:768px){
.for-desktop{
display:none;
}
}
#media(min-width:768px){
.for-mobile{
display:none;
}
}
This way you don't need to think too much other stuff. This will simpy do it.
Other way is to use CSS-Grid for the Entire Header. And show the select on the bottom (Need to write some code efficiently)
You can do one quick hack also. Set position:relative on the parent and position:absolute; for the select only when screen size is smaller and adjust your select accordingly.
Something Like the below example.
.header {
position:relative;
}
.header__search {
position:absolute;
bottom: -60px;
left:0;
right:0;
}
(You may need to do small adjustments with positioning of search item)
If you are interested in a little css refactor, you can use CSS grid to change the position of this search bar
For more info i would recommend this link
Cheers!
-- UPDATE ---
if not, you can hide this bar when your screen side reach some point and then show a new "div" or a "copy" right below (I think it can be cool and
easier to create animations)
or even use javascript to append this element to the desired position
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
EDITED FOR CLARITY
Currently I have 2 divs that are side by side on DESKTOP "kt_mobile_left" and "kt_mobile_right" -- each div is 47% of the page wide.
I want it so that on mobile AND tablet, the left div ("kt_mobile_left") stretches to 100% of the page and pushes "kt_mobile_right" underneath it. Right now it stays at only 47% of the page. I set a media query to make the width 100%, but it doesn't seem to be adding it to the div.
Is my media query correct for this?
Here's my code.
<style type="text/css">
/*desktop css */
.kt_mobile_left {
width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px;
}
.kt_mobile_right {
width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px;
}
/* #### Tablets or mobile css */
#media screen and (max-device-width: 867px){
.kt_mobile_left {
width: 100% !important;
min-width: 800px;
display: block !important;
margin-right: 0px;
}
.kt_mobile_right {
width: 100% !important;
float: none !important;
display: block !important;
}
}
</style>
<div style="margin: 0 auto; text-align: center; margin-top: 25px; padding: 25px; width: 100%">
<div class="kt_mobile_left">
<p style="font-size: 40px; line-height: 45px; margin: 0 0 40px; position: relative; text-align: center; font-weight: 300; color: #000; text-align: left">Learn more about who may be calling or texting your teen</p>
<p style="font-size: 15px; line-height: 150%; text-align: left"> TeenSafe has partnered with BeenVerified, a one-stop bakground check service, to help you learn more about the people who are calling or texting your child. Try it for just $1 for 5 days. </p>
</div>
<div class="kt_mobile_right">
<img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png">
</div>
</div>
Here's my JSfiddle: https://jsfiddle.net/kn4xrue5/
Can anyone help?
You have just messed up the code. I have cleaned some of your code and it seems that media queries works fine.
.kt_mobile_left {
background: red;
width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px;
}
.kt_mobile_right {
background: green;
width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px;
}
#media screen and (min-width: 320px) and (max-width: 1024px) {
.kt_mobile_left {
width: 100%;
}
.kt_mobile_right {
width: 100%;
}
}
Check out the fiddle
https://jsfiddle.net/mgautam1408/xjdcqvu3/
I still don't understand what your trying to do, but a couple things first and hope this helps. On KT-mobile-right you have a max-width. You need to clear that in your media query by doing max-width: auto otherwise nothing it won't go 100%. Then to just get the two containers to overlap you can just add position: absolute; to the classes in the media query.
Another suggestion would be to just hide the one that's going to be on the bottom by added display: none to that class in the media query.
My solution uses bootstrap.
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 style="font-size: 40px; line-height: 45px; margin: 0 0 40px; position: relative; text-align: center; font-weight: 300; color: #000; text-align: left">Learn more about who may be calling or texting your teen</h1>
<p style="font-size: 15px; line-height: 150%; text-align: left"> TeenSafe has partnered with BeenVerified, a one-stop bakground check service, to help you learn more about the people who are calling or texting your child. Try it for just $1 for 5 days. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png">
</div>
</div>
</div>
Using Bootstrap has its pros and cons but it is a very popular framework. This solution does not use any of the CSS that you provided because it uses Bootstrap's classes. I did pull out the CSS that you had left inline since it is generally not a best practice.
If you have questions or want tweaks to the code let me know.
Example
There is a margin-bottom set for each sidebar-block of 10px, it appears as the inner div which is sidebar-block.body is flowing out of the container.
I researched and debugged and cannot find the cause for this, the only time I use floats is on the main #sidebar itself.
HTML
<div id="sidebar">
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
<div class="sidebar-block body"></div>
</div>
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
<div class="sidebar-block body"></div>
</div>
</div>
CSS
#sidebar {
float: right;
width: 268px;
margin-top: 10px;
}
.sidebar-block {
margin-bottom: 10px;
}
.sidebar-block.title {
background-color: #2E392F;
min-height: 47px;
color: white;
font-size: 1.2em;
}
.sidebar-block.body {
overflow: hidden;
background-color: white;
}
.text-with-margin {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
display: block;
}
Fixed, it was because I used .sidebar-block title, .sidebar-block body in a way so that the css for .sidebar-block would automatically be applied to them, not my intention so I renamed the divs.
According to your comment. Change your code for that
#sidebar > .sidebar-block
{
margin-bottom: 10px;
}
Demo: http://jsfiddle.net/fvjw5/1/
You have to set the maximum width of the Sidebar element.
As it is, the Sidebar element does not have a fixed size, which will nullify the
.text-with-margin {
width: 100%; // The width. You should change this.
...
}
See this post for information about position: CSS Positions
You should try something like:
#sidebar {
width: 100%; // Or whatever size you want the sidebar to be.
position: relative; // You can play with this for different results.
...
}
You can look at the information provided on the answer below:
Responsive web design