Difficulties with Bootstrap, JQuery, HTML, and CSS

Currently in the process of revamping a university society's website, I have some experience in web development but nothing too advanced.

You can view the current website here: .

Here is a sneak peek at the new design I am working on: .

However, I've run into a few obstacles:

  • Using Bootstrap Carousel, the next and previous arrow images are strangely not appearing...
  • How can I make the Facebook feed responsive?
  • When resizing the page, the image slider moves under the navbar - unsure how to resolve this issue.
  • Also, when resizing the page, there seems to be unnecessary whitespace around the example images.

To clarify, I am no expert in responsive web design. Any assistance would be greatly appreciated! :P

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Something seems off with the Bootstrap Carousel - the next and previous arrow images are not showing up, which is quite puzzling...?

Try using the minified version of bootstrap and make sure to add glyphicons (your website is throwing 2 404 errors:

http://www.tech.nn.pe/fonts/glyphicons-halflings-regular.ttf 
Failed to load resource: the server responded with a status of 404 (Not Found)

http://www.tech.nn.pe/fonts/glyphicons-halflings-regular.woff 
Failed to load resource: the server responded with a status of 404 (Not Found)

Any tips on making the Facebook feed responsive?

https://developers.facebook.com/x/bugs/256568534516879/

Having trouble with the image slider moving underneath the navbar when resizing the page - any ideas for a solution?

Make sure to use a navbar example like this one: http://getbootstrap.com/examples/navbar/

Seeing some unwanted whitespace around the images I added to the page when resizing - any suggestions on how to solve this issue?

The margin on the .img is currently set to auto. Try adding a style with margin: 0

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS hover effect applied uniformly to all link children

Here is the HTML code snippet I am working with: <a href="">Bioshock 2<span> - Xbox 360 review</span></a> My goal is to style the first part of the link differently from the span. The desired styling should look like this: https: ...

css

What is the significance of the double exclamation mark operator in determining the truthiness or falsiness of an object's values?

Trying to determine the truthiness or falsiness of an object is proving to be a challenge for me. If an object contains all truthy values, I want one outcome; if it contains falsy values such as 0, an empty string, or undefined, I want a different outcom ...

javascripttypescriptobject

How can I make the background of a button change when I move my cursor over it

Is it possible to change the background image of a button when hovering over it? Perhaps have the image transition from left to right for a fading effect? Can this be accomplished? ...

javascripthtmlcssbutton

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss

Displaying Data in a Table

In my current setup, I have a table that receives data from a form through JavaScript. The code is as follows: <div class="row"> <div class="span*"> <table id="production" class="table table-bordered" style="margin:10px auto;bor ...

javascripthtml

Certain images are being rotated in a counter clockwise direction by 90 degrees

Users can upload images of their items, but some pictures appear rotated 90 degrees counter-clockwise after uploading. This could be due to the way the photos were taken on an iPhone. Is there a simple solution to correct this rotation issue? The following ...

javascriptimageimage-rotation

Having trouble sending a request in next.js with Docker during the build process?

When utilizing the getStaticProps function to send a request to my backend API from another Docker container, I am encountering an issue. Despite ensuring that the API URL is accurate, the static page fails to be created. This is due to the requirement for ...

javascriptdockerdocker-composedockerfilenext.js

Issue with font icons not displaying properly on Firefox

In Firefox, the icon is not displaying in the center, but it works fine in Opera. body { height: 100vh; display: grid; place-items: center; } .link { background-color: red; padding: 3px; display: grid; place-items: center; ...

cssfirefoxicons

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

javascriptphphtmlajax

How to prevent selecting a particular date in React-datepicker?

Hey there, I'm new to Stack Overflow and I'm facing a challenge that I hope someone can help me with. I'm currently working on a project where the previous developers used a React datepicker. The project managers want to keep it, but I need ...

javascriptreactjsreact-reduxdatepicker

Looking for the quickest hash and salt method for IP addresses in Node.JS?

Currently, there are many stipulations regarding the tracking of user data such as unique visits and returning users. An issue arises in certain regions where IP addresses are considered sensitive personal information. To continue identifying unique user ...

javascriptnode.jsencryptionhash

I'm finding it a bit difficult to arrange the placement of these DIV

Struggling with a layout issue here. I have a total of 4 DIVs that I want to position in a specific way: Initially, I floated DIV 1 to the left and DIV 4 to the right, which worked as expected. However, things get messy as soon as I try to include DIVs 2 ...

csshtmlcss-float

The World of JavaScript Frameworks

Seeking clarification on nodejs web frameworks. Recently began exploring express js on free code camp and have a few questions. Is express a full stack framework or just for backend development? I've noticed you can integrate various templating engine ...

javascriptnode.jsexpress

Conceal a single container without concealing everything else

Is there a way to hide an entire <div> if a profile image is missing, while keeping the other <div> with the same class visible? I've tried creating a solution in my jsfiddle, but I'm not sure if it's correct. Can someone verify? ...

javascriptcss

What is the process for loading a script file from within a component's HTML?

My goal was to include a specific script file in the component html, but I noticed that when I added the script reference within the html itself, the inner script file was not rendered along with the component on the page. Component import { Component } ...

javascriptangular

A simple guide to positioning an image between two lines of text with Material UI

I am trying to design a banner area with an icon on the left and two lines of text (title and sub-title) in the middle. However, when I implement this structure, each element appears on a separate line. You can view the issue here: https://codesandbox.io/ ...

javascriptmaterial-ui

Libraries that provide webkit support for all browsers

Looking for a library that supports CSS webkit across various browsers, including older ones like ie6. Preferably written in JavaScript. Any recommendations? ...

javascriptcss

Change the JavaScript code to output HTML rather than just plain text

I've created a small plugin for tinymce4 that adds an additional dropdown menu with a list of headers (e.g. h1, h2...). The issue I'm facing is that I'm trying to display these header elements with their corresponding styles (e.g. <h1> ...

javascriptjqueryhtmlcsstinymce

What is the best way to convert numbers into dates using XSLT format, similar to the date function in JavaScript?

Is there a way to convert a string number into date format using XSLT? This is what my code looks like: <insertdate>1494489190000</insertdate> I've searched on Google for solutions but haven't found anything satisfactory yet. What i ...

htmlxmlxslt

Creating an "Enter" Key in ASP.net Using C#

Here is the code snippet I wrote using C#: using (StreamWriter streamWriter = File.CreateText(@"C:\File.Html")) { streamWriter.WriteLine(TextBox2.Text); } The issue I am facing is that when I open File.Html, all characters are displayed on a sin ...

c#asp.nethtml