This is not breaking as i want it to, i'd like for the image to be above the button but below the words when the screens size gets smaller, like phone size. Im new to bootstrap you i haven't tried much besides look in the docs but haven't found my solution. Could sonmeone please help me and point out where this issue is and why its occuring? Thanks!
<div class="row">
<div class="col-sm-6 text-center h-80 text-center">
<p style="display: flex;
padding-inline-start: 140px;
justify-content: center;
margin: 0;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px">So you want to travel the world</p>
<p style=" display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;">I do not have millions in the bank but I am making it happen without stress or worry.</p>
<button style="border: none;
color: white;
font-size: 30px;
background-color: rgba(201,115,116,255);
border-radius: 5px;
height: 60px;
cursor: pointer;
width: 400px;">Download!</button>
</div>
<div class="col-md-6 text-center">
<img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height: 700px; width: 1300px;" alt="">
</div>
</div>
</div>
The image can never be above the button as they are in separate columns.
<div class="container">
<div class="row">
<div class="col-sm">
<p>So you want to travel the world</p>
<p>I do not have millions in the bank but I am making it happen without stress or worry.</p>
</div>
<div class="col-sm">
<img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height: 700px; width: 700px;" alt="">
</div>
<div class="col-sm-12">
<button> Download!</button>
</div>
</div>
</div>
This is basically what you want right? The download button is below the text and image except on a small screen where they all stack? I would also follow the advice given above to move all your CSS into an external file and use the bootstrap utility classes.
I would also avoid using characters other than A-z/0-9 in your filenames if possible.
Related
SO I want to reach this image
But i am getting this result, and i have a sense that i misused boostrap for the grid, but i am not sure it has to do with my initial problem
I want to reach a parallax element too by translating the image on the x axis on click as in this gif So i am worried if using margin would make it worse
EDIT: my problem isn't with the grid and text placement, i want to position the trees ( right and left on the right sides) which isn't working at all. I know it is immature to say this but idc of the grid if its work like in the prototype
here is my code
<section id="abtus">
</span>
<div class="col-4" style="margin-bottom: 700px;"><img class="tree" src="./images/tree1.png" width="750"></div>
<div class="grid text-center " >
<div class="cols-4 pb-3"><p class="text1">WHO WE ARE</p></div>
<div class="cols-4 p-1 "><p class="text2">We are two sisters who come from a similar <br>
background of love for everything creative and magical.</p> </div>
<div class="cols-4 p-1 "> <p class="text2">We aim to deliver your stories with interesting <br>
visually pleasing magic that separates you from the rest!</p></div>
<div class=" cols-4 p-1 pb-5 "> <p class="text2">To guarantee great quality work and also an added fun <br>
element to your project.</p></div>
<div class="cols-1"><img src="./images/Group 33.svg"></div>
</div>
<div class="grid px-5">
<div class="cols-4 offset-md-2"><img src="./images/Group 30.svg" width="90"> </div>
<div class=" cols-4 pb-4"></div>
<div class=" cols-4 pb-2"></div>
<div class=" cols-4"><img src="./images/Group 46.svg" width="150"></div>
</div>
<div class="grid text-center">
<div class="cols-4 pb-3"><p class="text1">THE TEAM</p></div>
<div class="cols-4 pb-5"><p class="text2 pb-4">We have a rich experience in the market, especially <br>
in gaming and animation. We work with several tasks <br>
such as visual development, concept art, character design, <br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p> </div>
<div class=" cols-4 pb-4"></div>
<div class=" cols-4 text-center"><img src="./images/Group 50.svg" width="120"></div>
</div>
</span>
</section>
the relative css
section{
flex: none;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
scroll-snap-align: start;
}
.tree{
top: 0;
left:0;
position:absolute ;
z-index: 1;
}
.text1{
text-align: left;
left: 0;
color: #20122B;
font-family: 'Lato';
font-weight: 900;
font-size: 30px;
}
.text2{
text-align: left;
color: #20122B;
font-family: 'Lato';
font-weight: 500;
font-size: 0.9em;
line-height: 16px;
}
.arrow1{
display: grid;
place-items: center;
place-content: center;
border-left: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 0.2em;
transform: rotate(225deg);
}
.right{
margin-right: 150px;
float:left;
}
.left{
margin-right: 100px;
float:left;
transform: rotate(45deg);
}
I have shared 2 images which mentioned below, In the first Screenshot there is a one div which label as This is test course, As you can see the footer div (which labeled as We're closed) is not sticky, I need the footer div as like second image. My conditions is something like - If the page don't have enough content then or you can say blank space then the footer div should stick at the bottom. Something like the second image.
I have tried position: fixed; it's showing perfectly but on the other pages it's still showing at the top which I don't want.
Another way I tried padding-top: 15vh; It's solving the problem but on the other page it's making blank space (Padding) which also not a good interface.
And tried many more methods like, bottom: 0; position: absolute; etc.
Current style applied in the div:
.footer {
padding: 0px 15px 10px 15px;
margin-bottom: 0px !important;
z-index: 11;
}
The HTML:
<div class="footer">
<div class="card card-style m-0">
<div class="card mx-0" data-card-height="120" style="height: 120px;">
<div class="card-center" style="z-index: 9">
Call
Email
</div>
<div class="card-center ms-3 ps-1">
<h1 class="font-20 show-business-opened working-message-above color-white mb-n1 disabled">We're Online!</h1>
<p class="show-business-opened working-message-under color-white opacity-90 mb-0 disabled">Call us Now! Let's have a
chat!</p>
<h1 class="font-20 show-business-closed working-message-above color-white mb-n1">We're Closed!</h1>
<p class="show-business-closed working-message-under color-white opacity-90 mb-0">We'll be back very soon!
</p>
</div>
<div class="card-overlay rounded-0 show-business-opened bg-highlight-dark disabled"></div>
<div class="card-overlay rounded-0 show-business-closed bg-red-dark"></div>
</div>
<div class="content p-3 pt-0 mt-0">
<p>If you have any queries or facing techinal problem, You can simply inform us, Our team will resolved your
issue as soon as they can.</p>
</div>
</div>
How can I resolve this?
You can do that starting from your HTML structure. for example, if your website has a header, main container, and footer, then you can manage their height to the viewport. specifically the main container's min-height to the viewport.
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.header {
width: 100vw;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: lightcoral;
}
.main-container {
width: 100vw;
/* min height should fill the viewport then to make all element in view port,
reduce other elements height from this min height including every pixel like borders or margin etc. */
min-height: calc(100vh - 300px);
/* or you can try this way if it's suitable for you */
/* min-height: 100vh; */
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}
.footer {
width: 100vw;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background: lightseagreen;
overflow: auto;
/* padding: 0px 15px 10px 15px; */
/* margin-bottom: 0px !important; */
z-index: 11;
/* border: 1px solid red; */
}
<header class="header">header</header>
<div class="main-container">main container</div>
<div class="footer">
<div class="card card-style m-0">
<div class="card mx-0" data-card-height="120" style="height: 120px;">
<div class="card-center" style="z-index: 9">
Call
Email
</div>
<div class="card-center ms-3 ps-1">
<h1 class="font-20 show-business-opened working-message-above color-white mb-n1 disabled">We're Online!</h1>
<p class="show-business-opened working-message-under color-white opacity-90 mb-0 disabled">Call us Now! Let's have a
chat!</p>
<h1 class="font-20 show-business-closed working-message-above color-white mb-n1">We're Closed!</h1>
<p class="show-business-closed working-message-under color-white opacity-90 mb-0">We'll be back very soon!
</p>
</div>
<div class="card-overlay rounded-0 show-business-opened bg-highlight-dark disabled"></div>
<div class="card-overlay rounded-0 show-business-closed bg-red-dark"></div>
</div>
<div class="content p-3 pt-0 mt-0">
<p>If you have any queries or facing techinal problem, You can simply inform us, Our team will resolved your
issue as soon as they can.</p>
</div>
</div>
.half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 320px;
height: 100%;
border-radius: 10px;
}
<div class="half-half-image-text">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Our Mission</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="img" style="background: url('https://www.pngall.com/wp-content/uploads/2016/04/Happy-Person-Free-Download-PNG.png')no-repeat center;width:40%"></div>
</div>
</div>
</div>
</div>
Hi What am I trying to achieve is depicted on the screen attached. I am trying to apply to a transparent image a background like this(purple in this example) a shape can be similar.
What am I looking for is a source of knowledge (links ets) for that kind of problem and would very much appreciate the help.
The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).
But I would like it to always be inside the container with the same proportions.
Here is my code:
.first {
padding-left: 5%;
}
.second {
padding: 80px 50px 0px 70px;
background-size: cover;
}
.fourth {
margin-top: 7%;
}
.third {
padding-top: 80px;
padding-bottom: 65px;
height: 678px;
position: relative;
width: 100%;
min-height: auto;
overflow-y: hidden;
background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
background-size: cover;
}
.selling-text {
font-family: Ubuntu;
font-size: 20px;
padding-top: 27%;
text-align: center;
color: black;
margin-left: 2%;
}
.second-block {
background: #F2EADC;
height: 500px;
background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
<div class="col-md-6">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<div class="fourth">
<button type="button" class="button btn-block">MENU</button>
</div>
</div>
</div>
</div>
<div class="second-block container-fluid">
<div class="col-md-6">
<div class="screen">
<p class="selling-text">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
</p>
</div>
</div>
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I don't know why JSFiddle doesn't work with jQuery 1.11.1, it looks different from what I see connecting it locally.
Ok, I think that the problem is with the fixed height for your <div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.
Here is a JSFiddle where I have just commented out the fixed height
I want to set the height of the section based upon the child elements but unfortunately I don't know what's wrong with my code. When I try to decrease the size of the screen the content in the paragraph and the img is overflowing.
HTML
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
</div>
CSS
.about{
height: auto;
margin: 0;
}
.about .container-section{
padding: 0;
height: auto;
position: relative;
}
.about .container-section .about-content p{
padding-bottom: 15px;
font-family: 'Lato', sans-serif;
text-align: justify;
}
.about .container-section .about-pic img{
height: auto;
width: 100%;
padding-bottom: 25%;
}
Any suggestions?
Ok, it looks like you're using Bootstrap, right? And Bootstrap is adding some floats, which removes elements from the page flow, and thus the container behaves as if those elements aren't in it. Try adding a cleared div in various places and see if it solves your issue, like so:
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
<div style="clear:both;"></div>
</div>