I'm trying to figure out why my small static webpage isn't showing up properly when viewed on mobile (noticed on Chrome android app). According to the docs, the columns should automatically stack on mobile. But, when I view it I see a normal view of the page with the width fitting correctly to the screen, but the columns stay in one row. Shown in the below screenshot.
I tested to see if it's my code by resizing the page on a desktop browser and the page responded as expected, stacking the cards so in a single column. Here's a desktop-view imitated on my phone.
Any idea what's going on? What am I doing wrong? Here's the code
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/>
</head>
<body style="background-color:#00aced;">
<div class="container">
<div class="notification" style="background-color:#fff">
<strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from
here. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code.
<br>
</div>
</div>
<div style="padding: 20px;" class="container">
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Githubforkodi
</p>
</header>
<div class="card-content">
<div class="content">
A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi.
Creator #goodsamarit4n. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Squeee!
</p>
</header>
<div class="card-content">
<div class="content">
A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy.
Creator #goodsamarit4n. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Alternative Facts
</p>
</header>
<div class="card-content">
<div class="content">
Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you.
Creator #goodsamarit4n. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Adding the following meta tag may solves the problem.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Related
I have tried to copy my section in the webpage as it is but when I copied my HTML5 code one below the previous it gave me an error, Such that the image in the first is at left and the text to right and I want it reverse for second section.
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
This is the image i want to display consecutively below it
This is the output I am getting
I am trying to set anchor to jump on other page with specified heading but my anchor tab is not working.
I have two files index.html and anti foam.html to link with each other but my anchor is unable to jump the Pulp and Paper Industry on other page.
index.html
<div class="col-md-4 col-sm-12 col-xs-12 gallery-item-wrapper nature outside">
<div class="gallery-item">
<div class="gallery-thumb">
<img src="img/works/im2.png" class="img-responsive" alt="2nd gallery Thumb">
<div class="image-overlay"></div>
<i class="fa fa-eye"></i>
</div>
<div class="gallery-details">
<div class="editContent">
<h5>Pulp and Paper Industry.</h5>
</div>
</div>
</div>
</div>
antifoam.html is the file to be linked.
<section id="projects">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<div class="card" style="width:100%">
<img class="card-img-top cimage" src="img/antifoam/PPI.jpg" alt="Card image cap">
<div class="card-body">
<h3>Pulp and Paper Industry.</h3>
<p class="cp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
Please tell me where am I doing mistake to accomplish this task.
You have to anchor at the ID. So you could have the index page link be:
<h5>Pulp and Paper Industry.</h5>
and the anchor be:
<h3 id="pulp" >Pulp and Paper Industry.</h3>
You should create a “landing” <a> tag with id (e.g. pulp-and-paper-industry) in your target page (antifoam.html):
<h3>
<a id="pulp-and-paper-industry">Pulp and Paper Industry.</a>
</h3>
Then you can link it in your source page through href:
<h5>
Pulp and Paper Industry.
</h5>
Or do it like this:
<a id="just an example"></a>
I hope you can do something with this. Maybe dont use the %20 and make it a one word instead. Just trail and error
Beldr
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love mixing my art background with web development and design. My goal is to find a job in the web development industry. In my spare time I love playing sports and board games.</p>
</div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>
I am using CodePen and trying to split these two things (the p and the img) using the bootstrap grid and it won't split. The image stays underneath the paragraph.
You are probably not including the link to bootstrap. Here I am linking the bootstrap cdn within the header tags.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love
mixing my art background with web development and design. My goal is to
find a job in the web development industry. In my spare time I love
playing sports and board games.</p></div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>
</body>
</html>
I coded up my website with html and css in Dreamweaver. When I open the html documents locally on my computer, the images all load (everywhere, including on the Art/Design page). When I uploaded all of the files to AWS, only three out of the sixteen gallery images loaded (the 7th, 8th, and 9th). For each of the gallery divs, including the images in them, the code is identical. When opened in chrome, developer tools show the images which didn't load cannot be found (404 error). The images do not load through the direct url or my domain. Other images outside of the gallery loaded fine.
Here is the html:
<section id="full-width">
<div class="title2">
<p>Fine Art</p>
</div>
<section id="pictures">
<div class="column">
<div class="gallery">
<img src="Images/Gallery/1.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Eye</h>
<h1>2016</h1>
<p>Graphite on paper.</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/2.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Iris</h>
<h1>2016</h1>
<p>Hard pastel on paper</p>
</div>
</div>
... <!--skipping a few elements-->
<!-- The following three images load without fail-->
<img src="Images/Gallery/9.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Fahrenheit 451 Alternate Cover</h>
<h1>2013</h1>
<p>Spray paint on newspaper on canvas</p>
</div>
</div>
</div>
<div class="column">
<div class="gallery">
<img src="Images/Gallery/12.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Glint</h>
<h1>2015</h1>
<p>Acrylic on illustration board</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/10.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Impressionist Self-Portrait</h>
<h1>2015</h1>
<p>Soft-pastel on illustration board.</p>
</div>
</div>
<!-- the following, again, do not load -->
<div class="gallery">
<img src="Images/Gallery/8.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Self-Portrait: Creation</h>
<h1>2016</h1>
<p>Graphite on paper</p>
</div>
</div>
... <!-- skipping more elements -->
</div>
</div>
</div>
I don't understand how some images can load and others cannot. The images which load are not the smallest sized images of the group, and neither is there anything which sets them apart.
Bonus question: why can't my error.html page load the stylesheets? (Again, Chrome claims 404 error, cannot be found)?
I'm new to HTML and working on a website where I need this text box to appear in the center as it looks rather odd on the left hand side (please help me make edits to the html as well:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</div>
</div>
</article>
</div>
Create css class in <head>'s <style> element:
.centered { width:70%; margin: 0 auto; }
Add css class to div:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3 centered">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</article>
</div>
</div>
</div>
</article>
</div>
JsFiddle: http://jsfiddle.net/3Ly1s3tv/