https://jsfiddle.net/z4of8fvy/
I know my code is somewhat sloppy but I am still learning. I have run it through a validator to see if I had a missing but I didn't find one. Any help would be appreciated.
If there are any other things that you guys can point out I would appreciate that as well.
It keeps asking me for more details but I don't know what else I can say. I do know that at one point the footer was working with me keeping it position: sticky and bottom:0 but when I added more content that's when the problem appeared. That is when I tried to play with it a bit and probably ruined it even more.
<div id="topBar" class="container-fluid">
<div class="row">
<div id="logo" class="col-xs-6">
<a id="homelink" href="https://smithstreetmediagroup.com">
<h1>SMG <br> Studios </h1>
</a>
</div>
<div id= "menu" class = "col-xs-6">
<a class="topBar" href="mess.html"><h4>Me$$ aka M.T.M </h4></a>
<a class="topBar" href="services.html"><h4>Services </h4></a>
<a class="topBar" href="campaigns.html"><h4>Campaigns </h4></a>
<a class="topBar" href="jeybundy.html"><h4>Jey Bundy </h4></a>
<a class="topBar" href="store.html"><h4>Store </h4></a>
<a class="topBar" href="contact.html"><h4>Contact </h4></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="studioHome" class = "col-xs-4 mainOne">
<h1> Studio Services </h1>
<h1 class="buttons"> Read More </h1>
</div>
<div id="jbHome" class = "col-xs-4 mainOne">
<h1> Jey Bundy </h1>
<h1 class="buttons"> Read More </h1>
</div>
<div id="mtmHome" class = "col-xs-4 mainOne">
<h1> Me$$ aka M.T.M </h1>
<h1 class="buttons"> Read More </h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 mainTwo">
<h1>Our Mission</h1>
<p>
Smith media groups consist of a team of polite professionals that provide high quality and affordable service. We consider our customers family so we take pride in making our customers feel as comfortable and satisfied as possible. We offer a vast variety of services such as photoshoots, music videos, parties, wedding videos/photos, real estate photos, music production & duplication, ect. If you have any questions give us a call or use our contact form and we will give you a call. Our Vison, Your Success</p>
</div>
<div class="col-xs-6 mainTwo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5iSNm5c6dBs?rel=0" frameborder="0" ></iframe>
</div>
</div>
</div>
<div class="container">
<div class = "row">
<div class = "col-xs-12">
<div id="slideshow">
<div class="slideImg">
<img src="battleflyer.jpg" />
</div>
<div class="slideImg">
<img src="bluesmoke.jpg" />
</div>
<div class="slideImg">
<img src="streetview.jpg" />
</div>
<div class="slideImg">
<img src="trackboard.jpg" />
</div>
</div>
</div>
</div>
</div>
<footer>
<div class = "container-fluid">
<div class = "row" id="bottomBar">
<div class = "col-xs-4">
<i class="fa fa-facebook-official" aria-hidden="true"> Facebook</i>
<i class="fa fa-instagram" aria-hidden="true"> Instagram</i>
</div>
<div class = "col-xs-4">
</div>
<div id="designer" class = "col-xs-4">
<h6>Designed by Xavier Velez</h6>
</div>
</div>
</div>
</footer>
It's actually very simple these days. One line of code.
min-height: 100vh;
https://codepen.io/rhroyston/pen/gXXMmr
Related
So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.
Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content
I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:
This is how the div is in normal screens
And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:
My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit. Let me share the html code for this section of the div for further clarity.
<section class="gray pt-5 pb-0">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="sec-heading mx-auto">
<h2>What People say About Us</h2>
<p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p>
</div>
</div>
</div>
<div class="row m-0">
<div class="owl-carousel" id="testimonials">
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_property.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Brian Inchedi</h5>
<span class="small-font">Real Estate Agent</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Irene Wambui</h5>
<span class="small-font">Happy Baby Day Care</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus, I received a customer instantly with a better offer than I wanted.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Teddy Kimani</h5>
<span class="small-font">Car Sales Person</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Margaret Wada</h5>
<span class="small-font">Recruiting Agent</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.
Edit: Adding CSS COde Snippet
So, I have copied the code to JSFiddle and here is the link:
Code snippets on JSFiddle
You can try to specify:
min-width: someValue
and the element won't be smaller than this value;
How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain
Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>
This question already has an answer here:
Bootstrap 3 - Aligning column height
(1 answer)
Closed 6 years ago.
Beginner here, I am building a one page bootstrap site, I have divided the site into sections, i have already added 1st image as the background in section one.
I have tried using the columns but no vial.
I cant get the two images side by side like shown in the prototype (http://imgur.com/a/MJQ2w).
I want the page layout to be like this with no margins but i am unable to do this with bootstrap. Please help me with your expertise.
<header style="background-image: url('static/assets/home-bg.jpg');">
<div class="intro-content">
<div class="brand-name">Learning & Experience</div>
<hr class="colored">
<div class="brand-name-subtext">Lorem Ipsum Dolor Init
</div>
</div>
<div class="scroll-down">
<a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a>
</div>
</header>
<section id="about">
<div class="container-fluid">
<div class="row row-no-gutter">
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
</div>
</div>
<div>
Check my example here, Without removes any padding provide by bootstrap
HTML
<section class="values">
<div class="col-md-4 box text-white box blues">
<div class="box-home">
<h4>our values</h4>
<p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p>
<div class="icon-text">
<p>01.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box bg-city blacks">
<div class="box-home">
<h4>our philipsophy</h4>
<p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p>
<div class="icon-text">
<p>02.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box blacks">
<div class="box-home">
<h4>our mission</h4>
<p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p>
<div class="icon-text">
<p>03.</p>
</div>
</div>
</div>
</section>
DEMO
Replace your code
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
With following line of code
<div class="col-md-6">
<img src="static/assets/training.png" class=" img-responsive" />
</div>
<div class="col-md-6">
<img src="static/assets/recruit.png" class=" img-responsive" />
</div>
Fixed the issue, Thanks guys.
<section id="about">
<div class="container-fluid">
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="static/assets/training.png" alt="training" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="static/assets/recruit.png" alt="recruit" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
CSS :
img {
width: 100%;
height: 100%;}
.imgcont {
padding: 0px;
I am trying to increase a massive gap between 2 columns and give the text a smaller width while havig it all still centered.
as you can see they are very spread apart and I would really like the gap to be minimal as well as the width of the text. I'd like to try and get the left image right corner and the right image left corner to be under the program text.
here is my code:
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-6">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"/wp-content/themes/creativeforces/images/april2.jpg">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-6">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"/wp-content/themes/creativeforces/images/kids.png">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"http://www.zipzapzopimprov.com/">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>
Any help would be appreciated!
change class both div tag which has class='col-md-6' to class='col-md-4' and put one div tab between them with class='col-md-2' and write your text here
Like as below :
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-4">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"/wp-content/themes/creativeforces/images/april2.jpg">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-2">
your text here
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"/wp-content/themes/creativeforces/images/kids.png">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"http://www.zipzapzopimprov.com/">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>
How about padding ?
Like this
.col-md-6 p { padding: 0 45px; }
You could offset the first column by one unit and the narrow both to 5 units..
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-5 col-md-offset-1">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"//placehold.it/300">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-5">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"//placehold.it/300">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>
http://codeply.com/go/KRPiGeNSpm