Newest 'responsive' Questions - Stack Overflow

Questions tagged [responsive]

Responsive is a tag to indicate a generic responsive website or web application programming or design topic. It's a more generic tag than 'responsive-design', and it serves for situations when you're specifically writing about programming (usually html/css/js). The word 'responsive' itself refers to the ability of a web application/website to respond and adapt its dimensions and interactivity across a wide range of devices and screen sizes.

1
vote
1answer
27 views

Responsive CSS Image size effects row sizes

I know this sounds like it's been asked before but I've played around with a lot of techniques I've found from other questions and nothing seems to get the desired effect I need. I'm trying to make ...
-1
votes
0answers
17 views

Bootstrap slow to fit breakpoints

I'm using bootstrap 4 with Angular app, when change screen width, it's moving slowly to fit breakpoints, What am I doing wrong here to get overlapped icon? What should I edit in Grid system? I think ...
-1
votes
0answers
10 views

How to add simple media queries that will fit the UI developed in all resolution?

I have UI which is developed in Large screen resolution. Now the same is not resembling same in medium or extra large screens I have added Bootstrap as well and trying to add media queries. @media ...
0
votes
0answers
10 views

Disable button untill user scroll down to bottom of page

I m implementing quiz kind of thing, so in that I have one review page at the bottom of review quiz page there is button called start quiz. How to disable start quiz button until user scroll down to ...
0
votes
0answers
11 views

Which method is true in less responsive in Magento-2?

My Question is which way is true in magento-2 when i use example-1 than i check view-source in browser than i seen multiple time media query in the file because i was change header and li in use two ...
1
vote
1answer
21 views

Style View diffrent for Desktop and Mobile | asp.net core 2 mvc5

So I have been doing c# / razor web applications in asp.net core 2 with mvc 5 and got along with it well but now I need to make a new Website which is capable of responsive design. I baisicly just ...
0
votes
0answers
15 views

Adding a responsive sidebar to a Leaflet application in R

I am building a Leaflet application in R. I want polygons in my map to be clickable. A side bar should then show additional information about the clicked element. The only solution I could find are ...
-1
votes
0answers
17 views

One part of header (h2) is not centering in trying to make my site responsive

I have been trying all kinds of ways of correcting this header, so that the last word is fully visible and there is an equal amount of margin both left and right. no matter what class I use, or what ...
0
votes
1answer
30 views

Is there a way to reduce the amount of radio buttons shown on smaller screens and then cycle through them?

this is my first time posting, I hope I respected all the guidelines. If not, I'm sorry! I'm trying to create a responsive website design with the following specs: 1. Large background image, that ...
0
votes
1answer
23 views

Is it possible to have different html.tpl.php files for different screen sizes?

As an online publisher, one of our programmatic ad partners is requesting that we have a different html.tpl.php file for responsive screen sizes. We have a drupal 7 website that one of our ad ...
-2
votes
0answers
15 views

popup folium map responsive [on hold]

I wrote python and I created a map with folium. I want to make popups. (Data Marker) is a responsive mobile window and other devices. But I don't know how to write the code. Please advise me. I ...
0
votes
0answers
11 views

Semantic UI conditional property based on device type

I'm looking at the Semantic UI React docs for Grid and I want to apply certain column properties only on mobile. E.g. <Grid.Column verticalAlign='middle' textAlign='right' computer={8} mobile={...
0
votes
0answers
15 views

Why are dynamic routes in nuxt inconsistant when it comes to reactiveness

In Nuxt. When I use a dynamic route it sometimes doesn't update the content inside the dynamic route page, these inconsistencies are disheartening and I'm wondering if there are any pointers to ...
0
votes
0answers
16 views

Image will not float: right to the screen because of an overlay & video background

I have a video background and I had issues putting text/elements over it, so I created an overlay. This helped me in the short term, but now I can't get an image element to "stick" to the right. I ...
2
votes
3answers
45 views

How to create responsive ImageView?

I'm building a game for my final school project, and I have this followed problem : When I try to place ImageView on the screen they are placed in different place depending on the mobile screen size. ...
0
votes
1answer
15 views

Responsive meta taking some fixed width even its not declared anywhere, it's showing after refresh. One time load working fine

I am using this meta to make the page responsive <meta name="viewport" content="width=device-width"> My application is using Angular and the meta is working fine once, but when I reload or ...
0
votes
0answers
9 views

How to make Responsive Slick Slider maintain nav arrows always?

I'm using the Slick slider within Wordpress. It's been working but I have changed the script to show 4 slides instead of 3 for the largest two screen sizes set in the responsive code. It shows 4 ...
0
votes
1answer
34 views

Bootstrap 4 logo position center on desktop [duplicate]

I am having a problem with bootstrap 4 responsive navbar. On smaller screens works as expected (logo in the centre, hamburger menu on the right) The problem occurs on larger screens (desktop) where ...
0
votes
2answers
44 views

Bootstrap: unequal columns on stacked

I'm trying to get a 50/50 layout, with half the row filled with a picture and half the row has text. It currently works on desktop, laptop, and tablet. On mobile (when its stacked) though, the image ...
1
vote
0answers
35 views

Max width grid problem - When changing to 90% goes off the page

I'm having trouble with figuring out why when i change the max-width variable from 100% to 90% part of the grid shoots off the page. If you need to see more of the code then please let me know. Would ...
0
votes
2answers
26 views

My text isn't staying within the boundaries of my bootstrap card. Why not?

I'm building a website for a client and I am trying to keep text within a Bootstrap card. Everything else is working fine. The card is not resizing to encompass the text - but this problem only occurs ...
0
votes
2answers
43 views

How do I create responsive navigation using HTML/CSS?

I use a boostrap template (Dreamweaver) to create my websites. I want to edit the navigation menu by removing the border from the menu icon and change the position of the links. How can I achieve this?...
1
vote
3answers
46 views

Flex with round buttons in a row

My page layout is like this The height is split into 3 pieces: top, middle, bottom I want the page to fit the device height and width 100%, so there are no scroll bars on height or width Right now ...
0
votes
1answer
40 views

Creating responsive grid layouts where all elements are equidistant from eachother vertically and horizontally

How can one create the vertically "equi-distant" item alignment apparent in "uneven" grid like layouts (for example https://www.zergnet.com/)? I tried CSS flex layout to do the same, and all I get is:...
0
votes
1answer
24 views

How to make my image grid responsive / resize and setting breakpoints

I am trying to make grid which contains images, text overlays and links (also a button for each section if i can work out how to place it where i want it). My main problem is trying to get it to be ...
0
votes
0answers
14 views

How to redirect to different home pages on Mobile and Desktop using Wix?

I am designing a website on Wix. What I want to achieve is that to have different pages for Mobile and Desktop users. I have tried wixLocation.to('websiteurl') but it is not working. How will I ...
3
votes
2answers
49 views

should i use media queries for responsive design with react?

I want to make a responsive website using react, should i use media queries for change layout and set display to 'none' for some components in mobile ( like regular html and css ), or do that in-react ...
0
votes
1answer
37 views

Wordpress picks wrong sizes for srcset, resulting in broken urls

I want to use responsive images for my Wordpress website. I modified the default image sizes and added some on top in my functions.php: add_action('init', function(){ // adjusting update_option( ...
-2
votes
1answer
27 views

Loop for this card slider or changing his behaviour

do you know how to loop this cards slider or changing behaviour, like a carrousel with fadeOut when you click on next arrow? https://www.jqueryscript.net/demo/Smooth-Card-Carousel-jQuery-CSS3/ thanks ...
0
votes
2answers
56 views

Bootstrap4: Width slightly too wide on mobile with animations (causes scroll at bottom)

I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library. In desktop I had to change some animations because they increased the width the page, with a horizontal ...
0
votes
0answers
57 views

CSS not working in mobile view in WordPress even after setting viewport before <head> tag

I am developing a WordPress theme for a consulting company. But, I am having problem with the CSS for the mobile devices. I have included <meta name="viewport" content="width=device-width, maximum-...
2
votes
2answers
42 views

How do I mix width and percentage(left/right) in flex layout?

I have 3 blocks, that I need to: The first block needs to be 200px wide and touch the left side. The second block is right after the first block and its right edge is at exactly 50% width of its ...
-1
votes
1answer
15 views

White space around page with widths set to max 100% [closed]

I have a page where the body and containers are all set to max 100% but I still have white space when viewing on my mobile. can anyone help me find what the problem is please? I'm pulling my hair out! ...
1
vote
2answers
39 views

Scaling down group of CSS shapes

I'm trying to make a group of elements sit in the upper left corner on a webpage. When the browser is at its max, the elements look fine. But when the browser width becomes less than the biggest ...
0
votes
0answers
10 views

Wordpress responsive design not working on mobile correctly

Iframe content works fine on desktop but not on mobile. (i have one website - single page site - loading inside another.) http://chessfusco.com/sb/home/ican/ Currently pulling this: http://...
1
vote
2answers
35 views

Responsive Flexbox on small screens

I have 4 icons in row order on large screens, but on small screen (let's say less than 768px), I need 2 icons in row order. Here is my current code : .welcome { display: flex; justify-...
1
vote
1answer
23 views

Making Bandcamp iframe responsive - centering and overflow issues

I would like to have a responsive Bandcamp iframe using only CSS, as described here (and many other places). However, 2 issues: If I enlarge my page to have a width greater than 700px, the iframe ...
1
vote
1answer
17 views

Move right column below the fixed sidebar on the left when resizing browser

I have a fixed sidebar on the left and a right column with a couple of cards that are vertically aligned. How do I make the right column fall under the sidebar upon resize, so that the sidebar becomes ...
0
votes
0answers
33 views

Fullpage.js when resize scrollOverflow create bug page view goes to bottom

I recently began using fullPage.js for a project and I have a issue: If I use scrollOverflow: true when I resize browser page goes to bottom This is my code: scrollingSpeed: 800, ...
0
votes
0answers
22 views

How to have two separate view actions with iPad and iPhone

I am looking to make an app in which my storyboard is looking to have two views. There is one intro page which shows a brief image, then you scroll up and the image is replaced with another subview to ...
0
votes
0answers
29 views

How to force desktop version on low resolution screen like beamer

I have classic bootstrap 4 responsive layout using col, col-md, col-lg, d-lg-none, etc.. and media queries like @media (max-width: map-get(@grid-breakpoints, lg)) How do I force full width view on ...
0
votes
1answer
26 views

responsive full page banner using object fit cover

I am using object-fit:cover. But it crops my image. I want my image to appear the same on all resolutions without cropping. Currently it gets cut from the sides. I want it to appear as a full page ...
-2
votes
1answer
12 views

Why does my Website looks responsive on resized desktop window, android tablet, but looks bad on small android phone?

My site look good on desktop, when window is resized it is responsive, also when i open it on Android Tab, but when I open it with any Android mobile phone it look bad. I think it does not load my ...
-3
votes
0answers
35 views

Is there a way to make this Member list responsive?

I have a Clan-Website with one Member list and I tested all and don't know to to make the Member List resposive. I tried to make something with the width and hight but it make all uglyer. The Code: ...
0
votes
0answers
28 views

How to use css for an Icon so that it will be responsive for with every text and for every browser resolution as well

I am using nav with li, ul to form a menu bar. In that menu bar I have different-different heading and one arrow icon with them. But the problem is icon is not responsive and it is showing in ...
0
votes
0answers
20 views

Safari ignores source within picture tag

I'm trying to prevent a picture from loading on mobile by putting an almost empty fallback in my picture tag, but Safari ignores the source tag and always loads my fallback. It's working fine in ...
0
votes
2answers
51 views

My javascript trigger is not working in my code with css media query

I am creating a web project. I want to toggle hide show in JavaScript. <nav id="navbar" class="sticky"> <div id="logo"><a href="Javascript: xs();" class="lounch" id="xs">&#...
1
vote
1answer
34 views

How to make responsive text in SVG that scales to fit container

I have seen many things hinting at this possibility: https://css-tricks.com/svg-text-typographic-designs/ SVG Scaling Text to fit container http://www.petecorey.com/blog/2014/10/08/quest-for-scalable-...
-1
votes
0answers
6 views

How to get a custom class of a <td> tag visible in the responsive layout of datatable?

I have defined a custom class to a td tag having below line of a code. Now the datatable is responsive so the layout is getting changed and my custom class "aff_link" is getting removed from the ...
0
votes
0answers
21 views

How to scale a word or unicode glyph proportional to the container size [duplicate]

I would like to display words or unicode glyphs so they are proportional to the viewable area (container size). That is, if the word is just a single character or we have just a unicode glyph, it is ...