Just working on a test website [1] which needs to scroll on mobile but for some reason it doesnt work. Any help is appreciated.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.title1 {
font-size: 145px!important;
line-height: 12vh!important;
text-align: right;
float: right;
margin-left: 170px!important;
color: #e8e8e8!important;
margin-top: 340px!important;
margin-right: -80px!important;
font-weight: 900!important;
}
.title2, .title2, .title4{
font-size: 10vh!important;
width: 80%;
line-height: 11vh!important;
float: left;
margin-top: 200px!important;
margin-left: 60px!important;
text-align: left!important;
color: #205545!important;
}
#contain-side {
width: 95%!important;
float: left;
padding-left: 93px!important;
}
#side-text #side-text3{
float: right;
width: 100%;
line-height: 5.5vh;
text-align: left!important;
color: black;
padding-top: 0px!important;
padding-bottom: 100px;
font-size: 33px!important;
letter-spacing: -0.8px;
}
}
I've checked everything. There is no overflow property, still it's not scrolling on mobile.
Please help-out! Thanks!
You should paste your HTML code out, otherwise another cannot analyse what's wrong in your page. At least you should show us the page structure.
I have edited a blank page according to your CSS classes. I hope that I understand your intentions correctly. The following page structure works fine for me. It works on my Huawei and Galexy devices. I hope it can help you a little bit. regards!
<body>
<div class="container-fluid">
<div class="contain-side">
<div id="side-text">
<div class="title1">title1</div>
<div class="title2">
title2
<div class="title4">title4</div>
</div>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
<div id="side-text3">
text3<br>text3<br>text3<br>
text3<br>text3<br>text3<br>
text3<br>text3<br>text3<br>
text3<br>text3<br>text3
</div>
</div>
</div>
</div>
Related
I am a junior developer and I am coding my portfolio. I have a problem which is the following:
I put an animation effect typing on a keyboard on a "p" with JS and it moves a lot of my elements.
I managed to fix some with: "position absolute" and some CSS adjustments but the second problem is that I put a JS library to put a dark mode and "position: absolute" makes that the dark mode does not take disregard color changes.
Here is the HTML5 code:
<section class="landing-page">
<p>Luck, <br> web developer <span id="monSpan">html</span> </p> **<-- animation is here**
<div>
<img src="/img/undraw_developer_activity_re_39tg.svg" alt="">
</div>
</section>
<section class="end-landing-page">
<div>
<button>En savoir plus <span class="material-symbols-outlined">
arrow_downward
</span> </button> **<-----the moving div is here**
</div>
</section>
Here is the CSS3 code:
.landing-page {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: bold;
}
.landing-page p {
padding-left: 10%;
padding-right: 50%;
font-size: 4rem;
}
.landing-page img {
height: 10em;
padding-left: 20%;
padding-right: 9%;
}
.landing-page div {
position: absolute;
padding-left: 40%;
}
#monSpan {
transition: all 0.5s;
background-color: rgb(129, 129, 255);
}
.end-landing-page div {
padding-top: 10%;
padding-left: 8%;
}
.end-landing-page button {
display: flex;
align-items: center;
background-color: rgb(129, 129, 255);
border-radius: 30px;
padding: 10px;
}
as said before I tried with the "position" property and it works but the dark mode library no longer works on these elements
I also tried with the "z-index" property but without result
I am French and use google translation, and there may be bad translations do not hesitate to ask me to rephrase.
I have made my own custom card component to learn CSS and HTML from scratch.
This is my code for HTML:
<div class="col-12">
<div>
<div class="search-event-block">
<div class="search-event-icon-left">
<i class="icon-horse search-event-icon-left-size"></i>
</div>
<div class="search-event-block-inner">
<div class="search-event-block-title">
<label class="search-event-block-padding ">Title</label>
</div>
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
</div>
<div class="search-event-block-links ">
<label class="search-event-block-padding">Go block | Delete block</label>
</div>
</div>
</div>
</div>
</div>
And this is my code for css styling for the card component:
.search-event-block {
height: 87px;
margin-top: 10px;
background-color: #fff;
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-title {
font-size: 1.1rem;
font-weight: bold;
margin-top: 11px;
}
.search-event-block-subtitle {
font-size: 0.8rem;
}
.search-event-block-links {
color: #2E85DE;
cursor: pointer;
padding-top: 6px;
font-size: 0.8rem;
}
.search-event-icon-left {
background-color: #F2F3F7;
height: 87px;
width: 74px;
padding-top: 18px;
padding-left: 13px;
}
.search-event-icon-right {
font-size: 18px;
display: inline-block;
padding-top: 30px;
padding-right: 5px;
overflow: hidden;
}
.search-event-icon-left-size {
font-size: 33px;
color: #214A96;
}
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
padding-left: 84px;
}
.search-event-block-padding {
padding-left: 20px;
margin-bottom: 0px;
}
The problem is in the class: search-event-block-subtitle. I want the subtitle and the icon on the same line. The icon must align to the end of the card. This is working fine, but when I resize the window the icon goes under the subtitle. When the screen goes smaller I want that the icon still remains on the same line as the subtitle.
I used bootstrap only for the cols and rows. I have tried to something like this:
<div class="row">
//col6
label
//col6
icon
</div>
This didn't work for me
How can I align the subtitle and icon on the same line when the screen goes smaller?
I also have problems with the height it doesn't auto scale. How can I fix this problem?
I have made a jsfiddle:
https://jsfiddle.net/ptyagcdq/1/
First step is to update your subtitle layer to this:
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle</label>
<i class="icon-basket search-event-icon-right-size"></i>
</div>
This will keep the subtitle text separate from the icon and will give you better control over it. Then in your css add this class:
.search-event-block-subtitle label {
width: calc(100% - 84px);
display: inline-block;
}
And update the "search-event-icon-right-size" class to:
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
width: 60px;
display: inline-block;
vertical-align: top;
}
The width calculation in your search-event-block-subtitle label is 100% - 84px because you should subtract the icon's width and the search-event-block-subtitle label padding. You should adjust these numbers to the actual size of the icon you are going to use.
I hope this helps.
How do I make my col class of my <div> element responsive?
I would like the text content and the image be shown side by side. The image should go down only when the screen size is too small. Like mobile screens.
Below is a part of my HTML and CSS code for the image and the content:
.content-style {
font-size: 20px;
font-family: cursive;
}
#image-position {
width: 40%;
border-radius: 700px;
}
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
<hr/>
</div>
If you are OK to use Bootsrap, you can use this updated snippet. Otherwise, you will need to implement your own media rules.
.content-style
{
font-size: 20px;
font-family: cursive;
}
#media (min-width: 992px){
.content-style{
float: left;
}
#image-position{
float: right;
}
}
#media (max-width: 992px){
#image-position{
margin: auto;
}
}
#image-position{
width:40%;
border-radius: 700px;
}
.row.someDiv{
margin-left: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-4{
padding-right: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-8{
padding-left: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row someDiv">
<div class="col-md-4">
<p class="content-style">Hola! I am Gaurav, I work at Torry
Harris as an IFW Support Analyst. I love coding and I wanna build my
career in a lot of fields. If I could name some right way, they
would be, Web Development, SOA Technologies, Automation Testing and
a lot more. Apart from these I also love to read. The genre of my
liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="col-md-8">
<img id="image-position" class="img-responsive"
src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c"
alt="Goku's Image">
</div>
</div>
<hr />
For a simple 2-column layout, consider using the display: flex property for the parent element and flex: 1 property for the child elements. To improve the responsive layout on smaller screens, use a media query to change the display type back to 'block'.
<style>
.wrapper {
max-width: 480px;
margin: 0 auto;
}
.wrapper .row {
display: flex;
/* extra code if you want to center the child elements */
align-items: center;
justify-content: center;
}
.wrapper .row > .column-left {
flex: 1;
}
.wrapper .row > .column-right {
flex: 1;
}
.wrapper .img-responsive {
max-width: 100%;
float: initial;
}
#media screen and (max-width:600px) {
.wrapper .row {
display: block;
}
}
</style>
<div class="wrapper">
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
</div>
Can you use floats? Try this:
.column-left{
float:left;
display:inline-block;
width:50%;
}
.column-right{
float:right;
display:inline-block;
width:50%;
}
by making the images inline-block and setting width to 50% they will both display in the same line. Floating makes them go as far left or right as they can.
<style>
.content-style {
font-size: 20px;
font-family: cursive;
}
.right {
width: 49%;
float: left;
margin-left: 10px;
background-image: url('https://img1.ibxk.com.br/2014/06/13/13145034906534.jpg?w=480&h=560&mode=crop');
min-height: 200px;
height: 30%;
padding-top: 10px;
background-size: 100% 100%;
border-radius: 700px;
}
.left {
width: 50%;
float: left;
height: 30%;
padding-top: -top: 10px;
}
#media screen and (max-width: 500px) {
.breaker {
clear: both;
display: inline;
height: 100px;
}
.left {
clear: both;
display: inline;
}
.right {
clear: both;
display: inline;
}
}
</style>
<div style="width: 100%;">
<div class="left">
<p> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more.
Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="breaker"><br></div>
<div class="right">
</div>
</div>
</div>
I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?
Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.
Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.
I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>
When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!