responsive

Can not visit link when click on the picture

由 Deadly 提交于 2019-12-11 15:18:27
问题 I have a 2 blocks. Photo and Video. In computer version when I click for them I can visit each link, but in mobile version they do no work, I mean they are not clickable. What is the problem? .media-links { width: 100%; } .media-links a { display: block; /*height: 190px*/ ; width: 40%; float: left; background-repeat: no-repeat; background-size: 100%; text-decoration: none; } .media-links .video-link { background-image: url('../img/videos.png'); margin-right: 10%; } .media-links .foto-link {

navbar dropdown menus display issue on mobile and small devices with media query

由 流过昼夜 提交于 2019-12-11 15:17:12
问题 Not a big expert in CSS and responsiveness design, I try to collapse my navbar using a media query. The issue is that for dropdown menus, the responsive design is not applied correctl : The dropdown menus are displayed like on a large desktop device. What I want is this : Result Expected But the result I obtain is this : Current result My code is actually the following : <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile

How to make a centered SVG image and text responsive?

由 北慕城南 提交于 2019-12-11 14:13:36
问题 I'm looking for a way to make responsive a SVG image and a text above it, that are centered in the page. The solution posted here doesn't work in my case. Here is my code: body { background: white; font-family: "Lucida Console", Monaco, monospace; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .text-line { text-align: center; color: #2a2f33; position: relative; white-space: nowrap; overflow: hidden; } <div class="container"> <svg xmlns="http://www

Flex-box two boxes wrap when scaling window browser

由 北慕城南 提交于 2019-12-11 05:52:10
问题 We have four children in one parent. And I want to make effect which you see on the picture. <article class="parent"> <figure class="child"> <img src="img/example.jpg" alt="" /> <figcaption"> <p>description</p> </figcaption> </figure> <figure class="child"> <img src="img/example.jpg" alt="" /> <figcaption"> <p>description</p> </figcaption> </figure> <figure class="child"> <img src="img/example.jpg" alt="" /> <figcaption"> <p>description</p> </figcaption> </figure> <figure class="child"> <img

Can't make chart js responsive

由 放肆的年华 提交于 2019-12-10 12:36:29
问题 sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem. I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite : responsive: true, The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen. Here is a fiddle.net Anybody to help me ? Thank you very much. 回答1: The answer is : 1.

One page website not responsive while navigating to different sections

由 佐手、 提交于 2019-12-10 11:47:50
问题 I am creating a responsive one page portfolio that has About, Skills, Work and Contact sections. I am coding from scratch using HTML and CSS alone. To navigate to each section up on clicking the links on the navbar, I have used the following lines of code: <div class="about"> <a href="index.html#about">About</a> </div> <div class="skills"> <a href="index.html#skills">Interests</a> </div> <div class="work"> <a href="index.html#work">Work</a> </div> <div class="contact"> <a href="index.html

4 Floating DIVs that respond symmetrically on narrowing screens with CSS

由 眉间皱痕 提交于 2019-12-10 10:40:15
问题 [ 1 ] [ 2 ] [ 3 ] [ 4 ] I have four DIVs floating left (above), using simple CSS: float:left; width:128px;height:128px As I narrow the screen, the last DIV jumps correctly onto the next line: [ 1 ] [ 2 ] [ 3 ] [ 4 ] But what I'd really like is for the last two blocks to jump onto the next line in order to keep the look symmetrical: [ 1 ] [ 2 ] [ 3 ] [ 4 ] And when the screen narrow further, the blocks stack one above the other: [ 1 ] [ 2 ] [ 3 ] [ 4 ] 回答1: Group [3] and [4] together in a div

Calculate height of div based off width & maintain proportion [duplicate]

由 淺唱寂寞╮ 提交于 2019-12-08 15:13:43
问题 This question already has answers here : Maintain the aspect ratio of a div with CSS (23 answers) Closed 6 months ago . I am looking for a pure CSS solution to what I have here done using jQuery to help. Basically I have 3 divs that spread evenly in width in a container. They maintain a 3/4 ration with the height being calculated off of the width. Furthermore, each div has a background image that stays proportional and some text that is centered horizontally and vertically. $(document).ready

How to stop 3 images side by side inside a div from wrapping to the next line?

由 霸气de小男生 提交于 2019-12-08 14:09:25
I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div. so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line. But automatically start to re-size to fit the re-sized div. The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below. [] [] [] Once all the images are vertically aligned the images then start to shrink down correctly. But this

How to make a responsive and interactive Image map using SVG

由 大城市里の小女人 提交于 2019-12-08 13:59:48
问题 I'm busy with a website and on the home page I need to have two clickable sections one of which takes you to one specialization of the company and the other takes you to their other specialization. I have created a square image split trough the center making two right angled triangles I need the top one to go to one link when you click on it and the bottom one to go to another link. I did some research and I saw that using SVG would be my best bet in achieving this especially since it must be
订阅 responsive