Newest css Questions

Q&A for professional and enthusiast programmers

Div auto height to fit content

I need the body div to be able to grow with content and divs I place inside it, such that as the content grows vertically down the page, so does the body background with it. Here's an image of the ...

Thrive Themes responsive issue

Im making a landing page with Thrive Themes Content Builder. http://www.fitmateptonline.com/kitchen-rescue-pak/ Everything is fine on desktop but when you open it on mobile, its messed up. I tried ...

footer not at the very bottom of page when you resize the height of browser window

When you resize the browser window height to the point where it enables scrolling, the footer moves from bottom of the page and creates a "gap" I do not want to use POSITION: FIXED, as it does place ...

make a float:left div sticky

I'm looking for a simple solution for an easy problem, and I believe it has been applied somewhere, but not able to find the solution. So now I'm having a very long introduction page like one of ...

difficulty in creating simple layout with CSS

i wan to create a content section in in my web page in three columns 1 column with fixed with of 250px on left side of page, 1 column with fixed width of 250px on right side of page and a column in ...

Prototyping in jQuery using $.fn on native functions

In context of this question, lets assume I used (function($){ //stuff I did in order to prototype in here })(jQuery) Now, I know how to define new functions, but I tried my best to change .position(...

Dynamic CSS color gradients based on number selected items

I am trying set the background color of div boxes in increasing gradients based on the specific CSS items found/discovered on the page. (I looked here and here but they did not address the calculation ...

Wordpress Onepage Site Navigation Dots

I am using the wordpress theme Brooklyn and I want to have navigation dots on the side of website like this http://daysapp.co. How can I do that? Is there a plugin for that or how can I achieve that ...

How do I override the styles from JQuery UI tabs?

I'm using JQuery 1.12 with JQuery UI (1.12). I want to override the padding that is inserted in each tab, but only on certain small mobile browsers, so I defined this in my CSS @media only screen ...

Why does mvc have the site.css file before the bootstrap file?

I've been trying to figure out how to modify the css of my mvc app (that is bootstrapped) and there seem to be quite a few posts on using @Render and @Section to deal with the problem. But then I ...

Scroll up to an element from bottom of the page

I'd like to scroll to the button that is placed approx 300px from the bottom of the page. So, anytime when it is pressed, the body should scroll up or down so that the button always gets at the ...

how to opendoor effect in animation css opens right to left?

Is it possible to opendoor animation css opens right to left. here is an example that opens left to right. .slideshow .overlay-item { position: absolute; top: 0; right:0; z-index: ...

post thumbnails are not aligned at bottom

On my front page I have 3 posts that spread the entire width of the page. The post thumbnail pictures align at the top, however they do not align at the bottom. I have tried align-items:flex and align-...

capture content of div as image

I want to capture the div as an image after the image is adjusted with zoom and drag within the div. I am using this plugin http://www.jqueryscript.net/zoom/Smart-jQuery-Pan-Zoom-Plugin-Smart-jQuery-...

Failing to load background-image with sass-loader (Webpack)

I'm having trouble trying to get the browser to successfully find a background image whilst using webpack and sass-loader/style-loader/css-loader. The path seems to be right, because whenever I ...

CSS Gradient not transitioning from end to end

My css gradient animation is working except all parts are changing at the same time not running from end to end like this www.verily.com, here is what I tried, .animated { -webkit-animation: ...

Is there a way to check how long a website takes to load with javascript

For my Science Fair project I need to be able to find out how long a website takes to load every 10 seconds. The issue is I'm not sure how to load the website and check how long it takes to load. So ...

Custom font not loaded via external CSS

I have a website A with css and custom font which all work fine. Now I'm trying to refer to this css from my website B. Everything works fine css-wise, except that the font is not applied. When I look ...

div not positioned correctly

I want the navigation bar to be at the bottom of the window when the page loads (but it will stick to the top while scrolling so I can't make its position fixed). The only thing I figured out is ...

jquery gallery carrousel with dot

I am finishing an work for a Gallery Carousel, and i'm only stuck on the jquery function. The gallery fades every 2.5 seconds, but when i click on a dot, i can remove the class active from the last ...

how do I change the white space between my header and my div after my first header?

Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!...

Background-image doesn't show up in a div

It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <...

jQuery not updating after window resize / positioning

If you make browser window smaller, refresh the page and maximize the window, the navigation bar will be in the same place instead of sticking to the bottom (it goes back to bottom when you refresh ...

Dynamically adding in my page url into a html social share link

I need to add in my page url in: data-sumome-share-url="pageurlhere". I'm currently using:<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?> But it's not working? Full ...

Moving divs around in Wordpress

So I have 2 problems in Wordpress which both have to do with moving divs around. The first problem is that I want the title and thumbnail to switch places in all posts that are shown in the sidebar (...

Ionic menu based on condition

i want right inside side (right or left) depend on value of rtl in controller rtl value (true or false) in controller <ion-nav-buttons side="rtl ? 'right' : 'left'"> <button class="...

How do I get my class defined in my TD to take precedence over the general class defined for TDs?

I have the following HTML ... #searchResults td { padding: 1px; word-break: break-word; } .noBreaks { word-break: normal; } <td class="noBreaks" align="center">MYWORD</...

Bootstrap Navbar Missing on Heroku Deploy (NodeJS, Angular2)

Before this is flagged as a duplicate question, this question offers a ruby specific answer using rake which is not applicable in my situation. Why is my bootstrap nav bar missing only in production ...

Not possible to change div background with CSS

I have the following Squarespace website. You can login to the site by clicking visitor access and typing in the code. I'd like to change the background of the website by using the followng ...

How to automatically generate circular thumbnails from a rectangular, fluid image's center for a website?

I've been searching quite a lot for an answer to this question and can't seem to find anything reliable. The issue is this: I have an image in a web page whose size I don't know until run time. I want ...

html list content collapses when mousing to scrollbar

I'm using pure html and css to create a dropdown list. I have anchor elements contained in a div, with a height set. I've added overflow: auto, and the vertical scrollbar indeed appears. I can ...

Bootstrap Link color

hi guys i need some help with bootstrap 3.3.7. how to change the color of an element in bootstrap? i tried various things i found on the internet, but none of them worked. one thing i tried was this:...

What is the right way to extend twitter bootstrap regarding ul li background image

I want to have an own background image for a dropdown menu (that is done via unordered list and list items -> ul and li). What is the adequate way to realize this with twitter bootstrap? Code ...

Vertical align button in the navigation bar

I'm doing a website using the Twitter-Boostrap framework and I would like to put a navbar-toggle button at the far right side of the navigation bar, aligned exactly in the middle. How can I do this? ...

How can I move my logo 18px away from the left?

My logo for my website is supposed to be in the top left of the page. Which it is, but right now its a little bit too close to left side. I want to move it 18px to the right. But I just can't get it ...

How to move divs when you have a smaller screen

I am having a difficult time using push and pull to move my divs for smaller screens. Divs on larger screen: [A] [B] [C] How I would like for them to look on smaller screens: [A] [B] [ C ] Any ...

Word wrap not working on flex item in internet explorer

In the following code I have a flex row container with a nested flex column container. In the flex column container it seems as though word wrap does not work. .profile-header { padding-bottom:...

HTML: Set scroll on div table-row

Hello i try to set scroll in .chat .body (overflow-y: scroll), i try every code but not work. thanks in advance ! //////////////////////////////////////// Code: <div class="chat"> <div ...

Grow Canvas to fit following div

I have a canvas which I want to be 100% screen width and at least 100% screen height, but more if the following div goes beyond the bottom of the screen. I am filling the canvas using Trianglify. I ...

Make fewer HTTP requests with links and Yii

<link href="<?php echo Yii::app()->baseUrl ?>/css/main.css" rel="stylesheet"><br> <link href="<?php echo Yii::app()->baseUrl ?>/css/yeti.bootstrap.min.css" rel="...

Align Items flex end react native

I am new to flexbox styling. I am facing problem while trying to align an element in the flexbox to the rightmost corner. I have written the following code to align the plus symbol in the image to the ...

Item not aligning to center - LightGallery and Isotope

I'm trying to create a centered alignment for the items of the LightGallery, I tried many CSS properties but no use, I even tried to do it with Isotope itself. Now the thing is I've to do this in css ...

how to turn border color red if input is not valid only when clicked outside of the input field but not at the time of filling the textbox.?

i am trying to do like this but border color turns red even i type a single letter into the input field and not getting normal till the input is valid. i am wishing to turn the border color red on ...

Inline-block element extends to 100% width when wrapping lines

I want to have a background color on an inline-block element that doesn't go past the widest point of text. It works fine as long as the line break in the text is explicit by adding a <br> tag. ...

CSS Background Image loads the half-size

I have a problem, in CSS I included an image as background but it load or show just the half size... My Code: CSS: html, body { margin: 0; padding: 0; } #background { background-image: url("../...

I want to be able to build an e-commerce platform and i only know bootstrap, what should i learn to aid me in achieving my goal

Currently i only know bootstrap, a little Jquery. What else do i need to learn to be able to aid in me in achieving a standard e-commerce platform like asos.com that has both a website and an ...

Align columns of a multiple flexbox rows

I'm using flexbox for grid columns .dr-row { display: flex; } .dr-col-1 { flex-grow: 1; flex-basis: 0; } .dr-col-2 { flex-grow: 2; flex-basis: 0; } In the first row I have three dr-col-1 ...

CSS: Text inputs and select box vertical alignment

I am having a tough time trying to get the text to align vertically in the middle of my select boxes. I think I have everything as simplified as I can get it while keeping the functionality and ...

Can't get an image in a tooltip

I am currently creating a website for a school project, and I am pretty new to html. I am trying to have an image and a short text pop up over a highlighted word to explain it in detail with a picture....

Grid columns without float

I'm trying to place seven columns of the same size in one row: .seven-cols .col-hard-1 { width: 14.28%; *width: 14.28%; float: left; } However, float:left screws up the all the next blocks on ...
Translating... 0%