I don't really know how to explain what is happening. I have an image in my website that is normally showing when I'm editing my html and opening it through chrome (basically when it's not already online!). When I upload the document online the image is not showing anymore. I checked the folder and the connection, but it appears to be okay. Also, other elements from the same folder are working properly. Could you please help me?
this is the code:
<div id="purpleSection" class="row bg-purple fullScreen">
<div class="col-9 offset-3 d-flex align-items-center">
<p class="display-4 mr-2 line-height">Mi chiamo Giulia Giordano e vengo da Palermo. Attualmente sto
frequentando l’ultimo anno dell’Accademia di Belle Arti. Sono una graphic designer, mi occupo di visual
communication, design per l’editoria e videografica. Clicca per saperne di più! </p>
</div>
</div>
<div class="row bg-purple">
<div class="col-12 d-flex justify-content-end mb-5">
<a href="chisono.html" class="mr-5 mt-auto ">
<img src="scopridipiu/scopridipiù.png" alt="">
</a>
</div>
</div>
You are never closing your img tag, see if closing it helps by adding </img> or />
Also it might be an encoding issue. In this row.
<img src="scopridipiu/scopridipiù.png" alt=""></img>
Try changing your png file to something like scopridipiu.png instead of scopridipiù.png.
Related
import React from "react";
export default function PromoBanner() {
return (
<section className="container mt-4 mb-grid-gutter">
<div className="bg-faded-info rounded-3 py-4">
<div className="row align-items-center">
<div className="col-md-5">
<div className="px-4 pe-sm-0 ps-sm-5">
<span className="badge bg-danger">Limitli Süre</span>
<h3 className="mt-4 mb-1 text-body fw-light">Small Title</h3>
<h2 className="mb-1">En Son Teknoloji</h2>
<p className="h5 text-body fw-light">
product Title
</p>
<a className="btn btn-accent" href="#">
Btn Text
<i className="ci-arrow-right fs-ms ms-1" />
</a>
</div>
</div>
<div className="col-md-7 d-flex align-items-center justify-content-center">
<img
src="/general/01.png"
alt="Güç Kontrol"
className="PromoBannerImage"
/>
</div>
</div>
</div>
</section>
);
}
Here is my sample comp. When ı export my project the image does not show how can ı solve this problem ?
Here is my jsconfig.json file. With this the css files is uploading but not images uploading when ı check the browser's Network developer tab ı can not see any images.
{
"compilerOptions": {
"baseUrl": "."
}
}
This is my file structure.
This is out file.
This is the root files.
This is my Public folder.
This is in out file index.html
When I add a dot like "./general/01.png" the image show and again give an error ı mean When ı refresh my browser the images show just 1 second after that the images does not show.
I have put a link to my image but I cant seem to get it to display in my webpage.
I have also tried to put the image in a separate folder but I still couldn't get it to display.
Any help would be much appreciated.
I have attached a photo to show my folder structure
enter image description here
<div class="carousel-inner">
<div class="carousel-item active"
style="background-image: url(./bball.jpg); ">
<div calss="container">
<h1>Example Headline</h1>
<p>
nionsdof nlsdfn klnsdf nsdklfnklsnfd kln
sl;df ;lkfsmdlmsdl;ksm dl;m klms lksfkj sjh
skdf jsdkjfn kn kjnsdf kjnsdkn sdfjk nksdf kj
s fdkjsdfk jnskdj nskdjnf jknfsdkjnskjdnf ks
</p>
<a href="#" class="btn btn-lg btn-primary">
Sign up today
</a>
</div>
</div>
remove the styling image line you made:
style="background-image: url(./bball.jpg);
In your css file, insert this:
carousel-item active.image {
content:url("bball.jpg");
}
or
div.carousel-item active{
background-image:url("bball.jpg");
}
I'm making a website in Bootstrap 4, but while creating one section I've ended up with the annoying white space on the right that causes unwanted horizontal scrolling.
Been playing with Inspector for ages, but can't figure out where's the problem.
Full code with the relevant section here: https://jsfiddle.net/dusset/aq9Laaew/284067/
<div class="row text-center text-light">
<div id="section-one" class="col mx-auto p-3 mb-5" style="max-width:720px;">
<h3 class="section-name text-white-50" data-aos="fade-in" data-aos-duration="250" data-aos-delay="250" data-aos-anchor="#section-one">O produkte</h3>
<h2 data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Preskúmajte nepreskúmané</h2>
<p class="font-weight-bold mt-5 larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Birthday Capsule je najoriginálnejší a najosobnejší narodeninový darček, aký môžte dať osobe, na ktorej Vám záleží.</p>
<p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Či je to babka, kamarátka alebo priateľ, život každého z nás má i nepreskúmanú stránku. Teda, donedávna nepreskúmanú…</p>
<p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Aký vek by mal na Marse? Koľkokrát sa už nadýchla? Čo iné je na dátume jeho narodenia výnimočné? To, i omnoho viac sme preskúmali, a dali do knižky, aby ste to mohli podarovať.</p>
</div>
</div>
Any help with removing it is much appreciated!
Your .row class has margin-left: -15px and margin-right: -15px. This is the cause of your problem.
Add this to your CSS and it's fixed:
.row {
margin:0px;
}
Here's an updated JSFiddle
If you don't want to override all row classes then add an id to the line below and add a CSS style for that independently.
<div id="something" class="row text-center text-light">
...
</div>
And the CSS:
#something {
margin:0px;
}
Use the "no-gutters" class with the offending "row". See: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Check you external css files. might be there is a overlapped content beyond the edges.
I have been trying to make two panels(boxes) the same size, no matter how long is the text inside them. I have realised that on my computer the two boxes are aligned, but on my laptop they aren't.
Here's how the page looks like on my laptop:
The code :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-book"></i> Probleme rezolvate</h4>
</div>
<div class="panel-body">
<p>Puteţi găsi modele de probleme rezolvate, împreuna cu explicaţii si desene pentru a asigura fixarea cunoştinţelor. Problemele rezolvate sunt grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Probleme
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-ok"></i> Probleme de testare a cunoştinţelor</h4>
</div>
<div class="panel-body">
<p>Testele de evaluare vor testa capacitatea elevilor de a rezolva probleme similare cu cele din categoria "Probleme rezolvate". Şi aici, problemele vor fi grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Teste
</div>
</div>
</div>
</div>
I was wondering how I can make them the same height. I've searched this on google and I couldn't do anything good.
EDIT: I would like it to look like this on every device
You can achieve this by using min-width: ; and min-height: ; you can specify a minimal amount of pixels needed for the box using this, this will also prevent your website from deforming when using a different laptop/pc (screen sizes differ on each) and if you don't want it to get bigger either, you can also replace the min with max as statements too
You fix your problem using class "row-eq-height" it's a bootstrap default css for using maintain equal height of multiple columns into a row. You must check the html structure on my demo becoz i changed the structure little bit.
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
</div> .........cont..
http://codepen.io/inewton/pen/rrRwAw
I have wracked my brain and can not find the reason this is happening. I have some links in one div that are mailto which work fine. But P tags and an image in a div in the next column seem to be inheriting the mailto.
I am using bootstrap. Has anyone come across this before? Can anyone see something I am missing?
Top of container with affected code:
<div class="row rowSettings col-sm-12">
<div class="col-sm-3 text-left sidepanel">
Some divs, then this div with the mailto links:
<li class="leftSubNavLinks"><a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact</li>
and the following div that is inheriting the mailto:
<div class="col-sm-9 text-left">
<div class="col-sm-8 titleContainer">
<img src="url/image.svg" alt="">
</div>
<div class="col-sm-4 titleContainer">
<h1 class="mainTitle"> Title text</h1>
</div>
</div>
<div class="col-sm-9 clearfix">
<p class="bodyCopy" id="body-text">some text here</p>
</div>
You haven't closed your <a>
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
You aren't closing your <a> tag
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact
</li>
Should be:
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
The browser will try to "fix" your broken code by closing the tag where it thinks it should be closed. This is almost certainly not where it should be closed which is why your following HTML is being bundled up into the <a>.