Questions tagged [css]

209658 questions
1

votes
1

answer
335

Views

@page css rule alternative for safari

How can I use write alternatives for these rules in safari? I am using angularPrint directive for adding print functionality to some of my pages, which adds some helper classes to my document and also use @page directive, everything works fine in all browsers except safari, I found that these rules...
Rathma
1

votes
1

answer
45

Views

How to keep pie menu in background?

I have an page layout which cover all components const PageLayout = ({ children, navBar }) => { return ( {children} © 2017. {settings.app.name}. ); }; And each page have prototype look like this class SecuritySystemPage extends Component { render() { return ( {//some thing to display here} ) } } Re...
tuan.tran
1

votes
0

answer
51

Views

How to trigger css keyframe with Scrollmagic?

I'm looking for example to trigger CSS keyframe with Scrollmagic but I couldn't find it. Basically I need JavaScript code to trigger this keyframe with scrollmagic. .project-title-line { width: 264px; height: 4px; margin-top: 10px; background-color: rgba(235, 235, 235, 0.4); border: 0; display: bloc...
zee7
1

votes
1

answer
49

Views

Carousel's image is bigger I expected

Carousel's image is bigger I expected. My Code * { margin: 0; padding: 0; } .menu { background-color: gray; width: 500px; height: 100%; float: left; } .title { color: white; font-size: 30px; margin: 0px 5px; margin-left: 40px; text-align: center; } .first { padding-top: 30px; } h...
user8817674
1

votes
1

answer
30

Views

How to adjust .navbar and replace 'toggle navigation' text for a dropdown menu?

I can't figure out how to adjust my .navbar in CSS so that instead of the menu text being displayed vertically, they are displayed horizontally across the top of my webpage. Second, I don't understand why the 'toggle navigation' text is displayed (on mobile and desktop site versions) at the top of m...
Ty B.
1

votes
3

answer
1.4k

Views

How to center a left-aligned image on mobile?

The image on my home page is left aligned. While it looks great on desktop, it does not look good on mobile I am trying to 'center' the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views. I have tried the following without success : @media all and (max-width: 675px) { .entr...
Guillaume F.
1

votes
2

answer
62

Views

add/removeClass doesn`t work on iPhone

This works correctly on browser but doesn't work on iPhone. Also I used the var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? 'touchstart' : 'click'; It also doesn`t work on iPhone HTML hello CSS .mod_section.active{ display:none; } .mod_section{ display:block; } JQuery function mod(){ $('.mod_secti...
Eric Lee
1

votes
0

answer
309

Views

“include” js and css file using a RELATIVE path from js file

Using Symfony 2.8.24 and jQuery 3.2.1 Been googling for this for a while now and, yes, there are lots of similar cases, involving using relative paths for resource loading but, none I have found which explains what I need, so SO: I need to include (or load or append to head or something) a css file...
Scaramouche
1

votes
1

answer
476

Views

How can I prevent a button shrinking smaller than non-wrapping text using css?

Essentially I have a button with the word 'Delete' inside. It currently uses this css: .btn-delete { font-size: 32px; background-image: none; border: 1px solid transparent; border-radius: 15px; border-top: 0px; color: #fff; background: linear-gradient(to bottom, #ff0000, #d40000); vertical-align: mi...
Terry
1

votes
0

answer
83

Views

Getting specific web page content with CSS stylesheet

I have this code which gets a specific web page content and loads it in an iframe. It works fine, unfortunately this content is in the body and doesn't come with CSS formatting, so I get an unformatted page. How can I get the stylesheet to come with the page content? Thanks in advance! var getHTML =...
Adam
1

votes
2

answer
342

Views

How can to responsive Nivo slider with content ?

I am a newbie to web development.I just tried to add Nivo slider to my content.I added that.But the problem is when I try to transfer my template to mobile devices(320px) it won't work properly.The background picture got responsiveness, but content in the slider won't be responsive.How come I fix th...
Kawsar_Ahmed
1

votes
1

answer
213

Views

Applied css into Youtube frame or fix the thumb

I have a problem with a video embed from youtube which is not showing me the thumb. I'm trying to overwrite the css of .ytp-cued-thumbnail-overlay-image this class is located within the iframe of YouTube. I try to use jquery but I have a security error. Any viable solution? I am using the following...
yorchp
1

votes
0

answer
264

Views

Knitr ioslides: customize code chunk size

As per this answer and other resources, my understanding is the when setting up CSS for an Rmarkdown presentation, code.r{} should control the parameters for echoed code, while pre{} should control the size of the output. However, pre{} seems to be changing both and code.r{} is doing nothing. Am I d...
Thoughtcraft
1

votes
0

answer
59

Views

How do I shut off scrolling on the Instagram in-app browser?

I've created a web game, and for some reason Instagram Stories swipe ups adds padding to the bottom of the game. It operates fine in Chrome, Safari, and Firefox (both mobile and desktop), and fine on Android's Instagram in-app browser - just not iOS. How do I force no scroll on the site? I have tri...
piedpipermask
1

votes
0

answer
114

Views

ng2-bs3 modal dynamic sizing?

I have been using an ng2-bs3 modal for my admin login form, but when the validation message comes, it is overflowing the modal body. How to fix it so that, when the message comes, its size also increases relative to the modal size? Example:
Aditya Vashishtha
1

votes
1

answer
258

Views

Slick JS vertical with two elements in same line

I've a problem with Slick. I need to display two elements in a same line with a vertically animation. It's working fine with the horizontally display. $('.slide').slick({ infinite: true, slidesToShow: 2, slidesToScroll: 1, pauseOnHover: true, autoplay: false, dots: false, arrows: false, vertical: tr...
Ayanei
1

votes
1

answer
1.8k

Views

Use PrimeReact Themes with CSS Modules Enabled in React Application

I have enabled CSS modules within webpack.config in my React application so that I can locally scope CSS files to individual components. I'm also trying to use the TabView component from PrimeReact. When I do so the themes from PrimeReact are not applied. If I create a separate project and do not...
HendPro12
1

votes
2

answer
225

Views

JavaScript not working in rails 5 app

I want to use static javascript files without using the gems in my rails app. My application.js looks like this //= require jquery //= require bootstrap //= require owl-carousel //= require rails-ujs And all of the Js file I have to add in javascript folder without using any gem using assets pip...
dev dap
1

votes
3

answer
48

Views

List with icon displayed in a single row instead of multiple rows

I have a normal list with icon classes like below Search I expect each list items should appear in a row as normal behavior. But I am getting all items in a single line. I have uploaded an image for the same below Can some one help me to resolve this issue ?? My expected result will be each icons...
Arunprasanth K V
1

votes
2

answer
1.9k

Views

Vertical scrollbar styling not works in Firefox browser

Code for Chrome, Opera, Safari for scrollbar as below: .scroll_bar::-webkit-scrollbar{ width: 20px; } .scroll_bar::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0px 0px 6px #0067ab; border-radius: 5px; } .scroll_bar::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0px 0px 6px #0067ab; border...
Aryan Infotech
1

votes
1

answer
169

Views

Rotate around Y-axis without changing position

I am trying to build a pyramid and animate it. The problem is after having rotated it around the X-axis, I try to rotate it around the height of the pyramid(Y axis), but I it moves every time. I tried basically every transform-origin options, but it doesn't work. My code is the following: Thanks for...
B. Ma
1

votes
0

answer
165

Views

How to overwrite valo-menu-responsive width-range rules?

I need to modify standard valo theme in Vaadin app, so I overwrite standard rules in mytheme.scss (like this), but I want to delete rules for valo-menu width-range in 801-1100px. For this width-range exist 17 rules in styles.css. Should I overwrite everything rule or may be there are more simple wa...
1

votes
0

answer
30

Views

WP - External links not working on iPhones

I'm trying to help out a friend but haven't had much luck so far. She had a website for an event developed but only just noticed that all external links don't work on iPhones. I've been hoping to google the issue but haven't had any luck so far :/ They built the website on WP/Genesis theme. It's ju...
Jasmin
1

votes
1

answer
90

Views

CSS opacity animation changes position? [closed]

Does the CSS animation property when used to change opacity also change the position of an element? If so, what is going on in the DOM that makes that happen, and how can it be offset? Context: I've added a Javascript EventListener to a set of images, which when clicked calls a function that initiat...
Dan-in-Austin
1

votes
1

answer
147

Views

Creating Themes using SASS (maps)

I'm new to SASS and I'm trying to give users the ability to pick different themes for a website. I created a map that looks like this: $theme-map: ( main-theme: ( primary: #007991, secondary: #55D3AE, tertiary: #D35555, gradientFirstColour: #007991, gradientSecondColour: #34EBE9 ), test-theme: (...
JuliaM
1

votes
1

answer
331

Views

Setting print margin content via @page css isn't working

I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of 'page-margin boxes' like so: @page { @top-center { content: 'Page ' counter(page); } } ...But no matter what I try, this style seems to be comple...
FreakinOutMan
1

votes
1

answer
604

Views

How can I use Vue.js transitions without hard coding height?

I have a Vue app with an element that needs to expand and collapse with a button click. The effect needs to be animated to make it less jarring. I'm using the tag for this but it doesn't work unless I hard code the element's height property in the css. This won't work because the element contains d...
d512
1

votes
0

answer
90

Views

CSS Box-Shadow not shown on position relative

I have this css for the outer div: #outer{ display: inline-block; width: 100%; background-color: #FFFFFF; } and this one for the inner which should give a box-shadow, but it doesn't: #inner{ margin-top: 50px; margin-bottom: 50px; width: 100%; height: 5px; float: left; position: relative; box-sha...
MauriceNino
1

votes
1

answer
131

Views

CSS slider with link to pop up video

I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated Here is my code
user9150564
1

votes
1

answer
99

Views

How to set the responsive width of Polymer component inside `<iron-list grid>`

Consider the following code, where always has a fixed width of 200px inside Polymer Element Test Case iron-list-grid-calc-issue .content { width: calc(50% - 32px); /* Not working */ width: 200px; height: 200px; line-height: 200px; text-align: center; border: 1px solid grey; box-sizing: border-box;...
Andrew See
1

votes
1

answer
93

Views

How to show content of rich text area in label

I'm using an emoji picker input (One Singal Emoji Picker), which converts regular input fields to contenteditable rich text areas. I'm looking to display a label which the text from the input in a label, but the approach I use with regular text inputs is not working and I'm not sure how to 'call ele...
gjames
1

votes
2

answer
29

Views

My webpage shown on mobile device has changed and squeezed (difference from desktop browser)

I have setup the website .It should show as the css setting . The page works when I turn around the IPad device . However , for the smaller screen size device ,like 5.5 inch smart phone . The webpage structure has been totally changed and squeezed . I have added the below code in the HTML .But it d...
Vito
1

votes
1

answer
835

Views

css clip-path overlap and border

Here is a codepen of what I did: https://codepen.io/dickeddocks/pen/opWBwQ and this is what I am trying to achieve: a rough picture made in MS-Paint so I am trying to make box 2, a div overlap box 1 which is also a div and I want to make the yellow border cover the shape and not the container box. I...
goteee
25

votes
2

answer
9.3k

Views

CSS3 ::selection behaves differently in FF & Chrome

I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background. I set the selection so that it looks like this in FF. But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transp...
madcapnmckay
1

votes
0

answer
21

Views

How to grab each frame from CSS animation?

Many libraries are available to animate text using CSS. I need to grab each frame from the animation. Can anyone help me please?
user3929226
1

votes
0

answer
822

Views

Making image fit inside Tumblr Theme Container

I can't seem to find any other Tumblr theme questions like this, so I'm starting a new thread! My issue is that in my Tumblr theme, is a container theme (or so I believe), but the images in the posts are in fact bleeding through the side of the container. There is use of a max-width:400px snippet of...
Aaron Nowell
0

votes
1

answer
18

Views

Why there is a margin/space between my 'header' an my 'main' (HTML)? [duplicate]

This question already has an answer here: CSS margin terror; Margin adds space outside parent element 5 answers I'm working in a responsive web page and now I'm making one of its media queries. I need to get my header and the first section of my main together, but I'm having trouble with it. I alre...
Bruno Sdoukos
-1

votes
1

answer
21

Views

Attempting to align text to the style of a SNES game

Let's make a long story, short. I want the text in this... To look more like this... And I mean the alignment of it when I type. In the layout I have, the first line is longer, and the second is shorter. It looks pretty ugly with those dots there. The site I'm using is very limited with the way thei...
pennylessz
0

votes
0

answer
15

Views

Position: sticky; not working no matter what

Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what. I tired: .entry-summary{ position: -webkit-sticky; /* Safari */ position: sticky; top: 0;} But this does nothing. The full code can be seen below and is p...
Andy
1

votes
1

answer
20

Views

Cannot fit inner image into its parent container on this ReactJS app

I have one very basic ReactJS component called: Designer which displays the Eiffel Tower as well as a bottom panel with some controls in it. The Designer is inside a div with the following size: { width: 510px, height: 300px}. The Eiffel Tower image has the following size: { width: 300px, height: 80...
davidesp

View additional questions