Now the code below is displaying perfectly on different mobile platforms and different mobile browsers. For some reason when I load it onto my desktop browser the image overlaps the links.
On mobile the image is perfectly centered above the links and desktop version image is overlapping the links. Any help?
The main issue is the placement of the image.
CSS:
html {
font-size: 20px;
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.btn {
border: 5px solid #2c3e50;
color: #2c3e50;
display: block;
font-family: 'trebuchet ms';
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 1rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.btn::before {
content: "";
background-color: #E26A6A;
box-shadow: 10px 10px 0 #F1C40F,
20px 20px 0 #3498DB;
position: absolute;
left: 0.25rem;
top: 0.5rem;
height: 102%;
width: 102%;
z-index: -1;
transition: all 0.4s ease;
}
.btn:hover::before {
box-shadow: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tools
{
position:absolute;
top: 25px;
left: 0px;
z-index: 2;
}
html:
<body>
<img src="tools.png" class="tools">
<div class="wrapper">
< MICROSOFT_LOGGER >
<br>
<br>
< OFFICE_TOOL_LOGGER >
<br>
<br>
< WEB_MON_COMPUTER >
<br>
<br>
< WEB_MON_ANDROID >
</div>
</body>
https://codepen.io/brandon-humphrey/pen/wvMGJzN
Desktop view: https://ibb.co/6YVZC13
Mobile view: https://ibb.co/7QFcdn3
That is because you're using position: absolute to position your image. What this does to your element is that it removes it from the normal document flow, and no space is created for it in the page layout anymore.
I recommend you read more about positioning in CSS so that you could figure out what you need and do it!
Small hint: What you might want is using Flexbox mainly to position everything properly, you can have a better result just by setting the flex-direction in body to column (Although I recommend putting your flexbox as styles for divs not the whole body). Also, remove the CSS class you wrote for tools, and the height you specified for the body.
The fact that you get the effect you want on mobile is a fluke. The wrapper for buttons is vertically centered, so there's space enough for the image to sit on top and not cover your buttons. Once the vertical space is reduced because the screen is landscape your absolutely positioned image covers the buttons.
If you want the effect to be consistent, I suggest you remove all your styling for the tool class and add flex-direction:column; to your body styles. You may still have to fiddle with it for your full effect, but this will get you the basics.
Related
The issue I'm experiencing is so simple it's confusing me...
I've implemented my social media logo as links. They work completely fine on the index page, just not elsewhere. I've essentially copied and pasted the exact code below to the remaining html pages, and nothing. The code isn't responsive. Please see examples below.
index.html
resume.html
Here is my code...
.socialBanner {
position: absolute;
}
.githubLogo {
position: absolute;
width: 40px;
height: auto;
top: -1260px;
left: 185px;
}
.linkedinLogo {
position: absolute;
width: 40px;
height: auto;
top: -1260px;
left: 265px;
}
<div class="socialBanner">
<img src="githubLogo.png" alt="githubLogo" class="githubLogo">
<img src="linkedinLogo.png" alt="linkedinLogo" class="linkedinLogo">
</div>
Thank you in advance!
As stated below, I've tried copy and pasting the code as well as reviewing it line by line, and I'm not sure what I'm missing exactly. Any guidance is appreciated!
It’s a positioning issue. Remove all your positioning code and you’re good to go.
img {width: 64px;}
<div class="socialBanner">
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="githubLogo" class="githubLogo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/LinkedIn_icon_circle.svg/1200px-LinkedIn_icon_circle.svg.png" alt="linkedinLogo" class="linkedinLogo">
</div>
Looking at the code I cannot think of a reason to use top: -1260px for social icons other than some animation moving them in from 'above'.
I have somewhat replicated the example image showing three icons below the byline. As you can see in the snippet CSS, with careful planning of flexbox elements and proper alignment you can have a responsive 'banner' without media queries.
The left side of the banner .me is a vertical flexbox container with three rows of which .socialBanner is a flexbox row container.
The right side of the banner .menu is a horizontal flexbox container with four menu options.
Upon resizing the browser, the flexbox alignment and wrapping options make the banner neatly fit in viewports >= 320px wide.
Check out the little math in html { font-size: calc(0.625vmin + 0.75rem) } which calculates the root font-size relative to the minimum viewport size (vmin) resulting in:
font-size: 14px on 320px viewport minimum size devices
font-size: 20px on 1280px viewport minimum size devices
All other font sizes are calculated relative to the current viewport minimum size. Effectively: for each 160px change in viewport size, the font size changes 0.25px
Math: linear equation y = mx + b for points p1(320,14) and p2(1280,20) => y = 0.00625x + 12 converted to CSS using 100vmin for x and 0.75rem for b (which is 12 / 16 = 0.75rem).
BTW site wide will still require you to copy the code to each individual html file unless you use some framework that does the copying automatically...
Snippet
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap');
*, ::before, ::after { box-sizing: border-box }
/* Linear equation y=mx+b using points p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) }
body {
margin: 0; /* remove default spacing */
display: grid; place-items: center; /* Easy centering demo banner */
width: 100%; min-height: 100vh; /* at least full screen */
font-size: 1rem; /* inherit responsive root font */
font-family: Poppins, sans-serif;
background-color: #222222; color: White;
cursor: default;
}
a { text-decoration: none; color: currentColor }
.main-banner {
width: 100%; min-height: 40vh;
padding: 1.5rem 2.5rem;
background-color: #c1e1c1;
}
/* horizontal orientation */
.main-banner, .me, .menu, .socialBanner {
/* Flexbox layout */
display: flex; flex-wrap: wrap;
/* Flexbox alignment */
align-items: center;
/* text alignment */
text-align: center;
}
/* vertical orientation */
.me { flex-direction: column }
/* Flexbox alignment specifics */
.socialBanner { justify-content: center }
.main-banner { justify-content: space-around }
.menu, .me { justify-content: space-between }
.me > * { width: 100%; text-align: center; font-weight: bold }
.name { font-size: 3.5em ; line-height: 1 }
.byline { font-size: 1.25em; line-height: 2 }
.socialBanner a { display: block; padding: 1rem 0.5rem 2rem 0.5rem }
.socialBanner img {
display: block; /* removes tiny whitespace below images */
border-radius: 50%
}
.menu { color: #b5b5b7; font-size: 1.25em; font-weight: bold }
.menu > * { border-bottom: 1px solid transparent; flex: 1; padding: 1rem; cursor: pointer }
.menu > :hover { border-bottom: 1px solid White; color: White }
<div class="main-banner">
<div class="me">
<div class="name" >jordan fichter</div>
<div class="byline">portfolio + ux design + web development</div>
<div class="socialBanner">
<a target="_blank" href="https://github.com/thesd5x"><img src="https://picsum.photos/40?random=1" alt="githubLogo" class="githubLogo"></a>
<a target="_blank" href="https://www.linkedin.com/in/jordan-fichter-a40762152/"><img src="https://picsum.photos/40?random=2" alt="linkedinLogo" class="linkedinLogo"></a>
<a target="_blank" href="https://google.com"><img src="https://picsum.photos/40?random=3" alt="googleLogo" class="googleLogo"></a>
</div>
</div>
<div class="menu">
<div>welcome</div>
<div>resume </div>
<div>about </div>
<div>contact</div>
</div>
</div>
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 made a responsive view and now I have a problem with scrolling content on phone. To be more precise, the problem is that my absolute positioned elements are scrolling with the content. Example:
.days {
display: -webkit-flex;
display: flex;
overflow-x: auto;
padding: 15px 0;
position: relative;
}
.fade-left {
padding: 0 !important;
position: absolute;
left: 10px;
top: 15px;
width: 25px;
height: 37px;
background: url('../Images/left-opacity.png');
}
.days div {
font-size: 15px;
text-transform: uppercase;
padding: 10px 40px;
color: #a4b5bf;
white-space: nowrap;
}
<div class="days">
<div class="fade-left"></div>
<div class="fade-right"></div>
<div>Attendance to date</div>
<div>Attendance this Year</div>
<div>Absence Pattern</div>
</div>
Whenever I start scrolling , the fade-left/right start scrolling with my elements inside days div. They are not fixed on the sides, that is what I need. Those elements should stay on sides while the content is being scrolled.
Note that this behavior is only on phones, not in chrome console or other browsers.
Thanks in advance.
EDIT: https://jsfiddle.net/k2qzfz3m/ here is a jsfiddle with the issue, I want my white boxes to be stay on the edge of the parent div, not to be scrolled with other content. Position fixed is not an option since I have more content and on the page.
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.