jekyll - experiencing issues with CSS styling functionality

Recently, I've started exploring Jekyll as a tool for web development.

I came across this theme called DentistSmile and decided to give it a try.

However, when I run jekyll build, the _site directory is created but the CSS styles don't seem to be rendering properly. The css folder is present, though.

Here's a screenshot showing how it looks on MY server: https://i.sstatic.net/w1fOk.png

Being new to web development and not very familiar with HTML and CSS, I'm struggling to figure out what might be causing this issue. Any help would be greatly appreciated!

If you'd like to take a look, here is the code of index.html from the generated _site folder: Here. Just so you know, I'm using Windows as my operating system.

htmlcssjekyllstatic-site

Answer №1

To prevent issues with CSS links, ensure you are only uploading the contents of the _site folder and not the folder itself.

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

Learn how to fetch data using JavaScript and store it in an array, then display the data in a Bootstrap card using inner

I am working with a Fetch method that looks like this: async function sendApiRequest() { let APP_ID = "f61bb958"; let APP_Key = "7c465e19d8e2cb3bc8f79e7a6e18961e" let INPUT_VALUE = document.getElementById("inputRecipe&q ...

javascripthtmlajaxfetch-api

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...

htmlcss

Java code for replacing text with quotes

When I receive HTML code from an internet service, it includes the following: <div style="text"></div> I want to replace 'style="text"' with 'new="aaa"'. However, my current attempt at using the replace function is not wor ...

javahtmlreplace

Function for jQuery Slide Toggle is not being invoked

I'm struggling with jQuery Slide Toggle. $(document).ready(function() { $("a").click(function() { $(this).parent().parent().children("p").Toggle(400); return false; }); }); I have multiple posts displayed on the page fetched from ...

javascriptjqueryhtmlcss

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Is there a way to have an object with an ID as a key value pair? For example: friends = { 1:{name:'John', age:25, gender:'boy'}, 2:{name:'Jessie', age:30, gender:'girl'}, 3:{name:'Johanna', ag ...

javascripthtmlangularjs

CSS Word Breaker: Shattering Text into Pieces

Is there a way to prevent long words in the <p> tag from breaking awkwardly in the browser? I attempted to use the CSS property word-break: break-all;, but it seems that Firefox and Opera do not support this feature. Additionally, normal words are al ...

htmlcssword-break

Position the div to the furthest right side of the screen

How can I position the cog container on the right side of the page and adjust its size to match this image: https://i.sstatic.net/YrW33.png .header-container { border-bottom-style: solid; border-bottom-width: 1px; border-bottom ...

htmlcss

How to disable a dropdown menu once a radio button is chosen using jQuery

I currently have a select drop down with multiple options and two radio buttons set up as follows... <form> <select id="drop_down"> <option value="1">One</option> <option value="2">Two</option> <option ...

javascriptjqueryhtml

Is there a way to combine the input tag's name with a growing integer variable?

Within a while loop, I need to modify the names of input tags by concatenating them with an increasing integer variable. However, attempts to use the $ symbol have not yielded successful results. <html> <head> <meta http-equiv="Content- ...

htmljsp

Utilizing SQL and Python within a web environment

Can you help me with a question? I have created Python scripts in Spider where I pull data from SSMS using SQL commands and then manipulate it using Python. Now I want to run these codes on a webpage or other online platforms so that others can use them ...

pythonsqlssmshtml

Tips for maintaining the full width of an image within the viewport while also preserving a fixed aspect ratio of 16:9

After extensive research on the topic, I find the solution to implementing a parallax effect using GSscrolltrigger a bit complex. This is mainly because I need to dynamically adjust the height of the parent div based on @media CSS, while ensuring that the ...

cssbootstrap-4responsive-design

Displaying dropdown options based on the previous selection made by the user

Can I link the data in my second dropdown to the selection made in the first dropdown? I tried a similar solution from stackoverflow without success. You can find the reference here. The code works when directly copied and pasted but not within my system. ...

javascriptphphtmljquery

What is causing the <iframe> to malfunction when I use it?

I am encountering a problem with a basic snippet of HTML code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <title>iframe Example</title> </head> <body> <div> & ...

htmlcss

What can I do to prevent my background images from overlapping each other?

I'm trying to get the background images to display side by side with equal sizes and no spacing between them. The current code achieves this, but the images end up overlapping slightly, not filling 100% of the container. Despite setting the backgroun ...

htmlcssbackground

Tips for preloading an ENTIRE webpage

I am looking for a way to preload an entire web page using JavaScript in order to have it cached in the user's browser. While I know how to preload images with JS, my goal is to also preload the entire page itself. For example, on my website, there ...

javascripthtmlpreloadyslow

Tips for adding a DIV element at the top of a webpage while smoothly sliding down other elements with absolute top:0 CSS styles

I am dealing with a website that has a complex structure of elements and CSS styles, with many elements having `position:absolute` and `top:0` styles applied. There are multiple nested divs due to inheriting the website from a previous owner. I am wonder ...

htmlcssasp.net

Triggering a check event for a jQuery checkbox nested within a ul and li element

I've been working on a code snippet to handle checkbox check events: <html> <head> <style> #leftPane { width: 200px; height: 500px; border: 1px solid; float: left; } #rightPane { ...

javascriptjqueryhtml

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

csstypescriptnext.jshyperlinkcard

Restrict the size of the numerical input in AngularJS

<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...

javascriptjqueryhtmlangularjsangularjs-scope