This is a dumb question for some, probably, but I don't know much of HTML so please bear with me.
I'm trying to setup an HTML my friend did for me for a site, an user HTML. But, for some reason, the original code she gave me for my avatar doesnt work. Everything else does, even other images, except the avatar.
This is how it's supposed to look like (this was her screenshot of the preview), but instead, looked like this on my end.
<!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ----------------------------------------------> <div class="card border-0 modal-open bg-faded" style="border-radius: 1em; box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
<div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px;"
class="card-block" ></div>
<div class="row">
<div class="col-lg-3 pr-lg-0">
<div class="card card-block d-block bg-faded border-0 rounded-0">
<!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png"
class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">
This was the code she sent me (the focus is the avatar part, but decided to upload the entire thing).
After a bit of mumble jumbo, she tried to fix it to something else (the avatar section) to see if the image would show up. And so it did, but not in the original way intended. So she assumed my PC basically hates me.
<!-- 【 Avatar 】
------------------------------------------------ -->
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" class="rounded-circle mx-auto p-2 bg-faded" style="width:200px;margin-top:-75px;">
This was the 2nd code she sent, and worked.
This issue has happened to me before with another entirely different HTML for the same purpose. If I disable WYSIWYG the original code does work, just not how it's supposed to. It ends up separated from the background.
So this boggles my mind. Is it my PC or just really, horrible luck with HTML?
For now I'm sitting with the WYSIWYG disabled, to have at least a readable avatar. Any help on this, if it's something fixable?
Sorry for any bad term, confusion, or something of the like. I'm illiterate when it comes to coding.
EDIT1: I tried to see it in a code preview made for the specific site I'm using, and it does show up like intended (see image 1), but when copy pasting that code for the live site it breaks (img 2). This is making this all more confusing.
A lot of the problem with something like this is that you not only have to worry about the HTML being sent to you but also the styles that are already on your site influencing it after you put it in.
As an example, here's a simplified version that should mostly match the intended look/feel. It only uses inline styles. View it standalone on this site and I bet it's mostly what you want. If you paste it into yours, it MAY work. The point is the MAY. It's not "your PC hates you" but instead that html/css layout can get pretty complex and it's going to take some studying on your part to figure out what's getting applied and how to properly integrate any snippet with your site.
<div style="display: flex; flex-direction: column; align-items: center;background: #222;">
<div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px; width: 100%;"></div>
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" style="max-height: 200px; margin-top: -100px;border-radius: 200px; border: 10px solid #222;">
</div>
Related
I have a website that has multiple retailer images showing, and these are affiliate links. The issue I have is when I view on a desktop, even with cleared cache, cookies, and other browsers, I can see all retailer images, however when I am speaking with users of my site, they can not see images on desktop only mobile.
The website is www.yourshoppingcentre.co.uk
I have a used the same code through the site to make it easier to add more retailers in the future, and an example can be found here:
<div class="card" style="border: None; padding-top: 5px;">
<div class="thumbnail center well well-small text-center">
<!-- START ADVERTISER: Kelsey Media from awin.com -->
<a rel="sponsored" href="https://www.awin1.com/cread.php?s=3105047&v=19854&q=433993&r=1052665" target="blank">
<img src="images/advertisers/kelsey_media.jpg" >
</a>
<!-- END ADVERTISER: Kelsey Media from awin.com -->
<div class="card-body">
<div class="span12">
<div class="thumbnail center well well-small text-center">
<!-- <button class="btn btn-primary mb-2">Add to Favourites!</button> -->
</div>
</div>
</div>
</div>
</div>
One user has shown me a console screenshot where it shows the images have CSS of Display: None !important;
However again when inspecting the site myself I do not see this CSS and have no concept of how they are seeing this.
So I am guess I am asking a couple of things here, is this issue replicable, and secondly, if so, how to solve, as it is affects a subset and not all users is my understanding.
Appreciate any help!
Thanks!
It's blocked by your adblock probably.
You can see that in your inspect tool :
The images are being blocked by an ad blocker on desktop. If your users disable their ad blocker, the images will show on desktop.
To resolve this, you might consider changing the URL you're using for those images.
Specifically, it seems that uBlock Origin doesn't like advertisers being in the image url.
When I use the 'Live Server' Extension in VS Code my website looks great.
I deployed on vercel and the only thing showing are my social media buttons and the footer. Everything in between are 'alt=""' broken images. (alt="" being an example of course.)
An example of one of the lines:
<div class="container" id="roadmap">
<img class="center" src="/public/images/Roadmap Button.png"
alt="roadmap" style="width: 50%;height: 100%; margin-left:
25%;">
<img class="w-100" src="/public/images/Roadmap.png"
alt="roadmap">
</div>
My index.html, styles.css, and images folder is all in the public folder. Once again, on local server everything looks great, but when I deploy it, everything works great except for the images. They just won't show. Only the alt tag will (alt="").
I also cleared my cache, and looked on different browsers and devices. Same thing. Any help on this would be greatly appreciated. I am somewhat a beginner at this still. So I am going for more of a static/navigational website.
I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq
I ran into some bizzare CSS behavior when I was refactoring my style tags into a separate CSS file. Here is my HTML; the "parentOfViewCommentsLink" is the specific class that's acting strange.
<div class="parentOfViewCommentsLink" style="height=20%">
<span ng-show="image.description">{{ image.description }} </span>
<div ng-hide="image.description" class="noDescription">No Description Found</div>
<!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
<div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
<div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
<!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
</div>
and my CSS:
/* Comments */
.viewCommentsLink {
position: absolute;
bottom: 10px;
left: 10px;
}
.parentViewCommentsLink {
position: relative;
}
This HTML/CSS produced this bizzare result:
Scratching my head at this strange behavior because it just worked - All I did was extract my style tags into a CSS file. After playing around with it I was able to fix it!
How you might ask? Well I threw a '2' in front of the class name:
<div class="2parentViewCommentsLink" style="height=20%">
<span ng-show="image.description">{{ image.description }} </span>
<div ng-hide="image.description" class="noDescription">No Description Found</div>
<!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
<div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
<div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
<!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
</div>
CSS:
/* Comments */
.viewCommentsLink {
position: absolute;
bottom: 10px;
left: 10px;
}
.2parentViewCommentsLink {
position: relative;
}
I have no idea why this worked or why it would even make a difference. I do not have another class name parentOfViewCommentsLink anywhere and at this point I'm just curious as to why this even worked. Anyone have any ideas?
EDIT: "I've also tried "parentViewCommentsLink", "viewCommentsLinkParent" niether of which worked
Turns out I don't actually need parentViewCommentsLink at all. In fact HAVING the class is causing the issue.
In addition, if you add a number in front of a CSS class it becomes invalid. So since I put a number in front of the CSS class it became invalid and it worked because I never even needed the class.
And not adding a number made the class valid which broke it. It was doing more harm than good.
Bizzare situation. Thanks for your help reguardless.
We've got way too little info to give you an accurate answer.
Most likely there are additional rules being applied to the element.
Inspect the element and look for the css rules.
All modern browsers come with dev tools. right click the element and choose inspect, a window will pop up which will help you debug css issues.
Once you know WHY it's being displayed like that, you can go hunt for the relevant rules. They might be in some other file and being overwritten due to import order.
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.