5,124 questions
0
votes
1
answer
44
views
How to reorder table's columns in a responsive manner
I am trying to make a responsive table like this:
There are six columns (D1 to D6); on desktop they are all in the same row.
On mobile I want D2 to be in first position and bigger (2 row) D3 in ...
- 128
0
votes
2
answers
40
views
CSS not applied to the extra part of overflow-x:
enter image description here
I am having a bug like in the picture, when has many . To make the code responsive, has overflow-x: auto, but the extra part is not applying css code of .
My JSX code:
&...
- 1
0
votes
0
answers
28
views
How to create popup scrollable responsive table with varying amount of data?
I am trying to create popup scrollable table, ideally responsive(didn't achieve it for now). Just body should be scrollable. The problem is: I set height to make body scrollable. But sometimes data ...
- 1
0
votes
1
answer
29
views
Is there a way to define custom responsive classes?
I am fairly new to tailwind. I'm trying to find an elegant way to define classes for different screen sizes.
Given that I have different screen sizes to handle different font sizes in each screen size ...
-1
votes
1
answer
43
views
Making A Responsive Image Slideshow [closed]
I've been playing around with an image slideshow on my website. It works well when I test it on the PC version of the site, but it doesn't scale down properly on a mobile site, the ratio of each image ...
- 29
0
votes
0
answers
38
views
Responsive text truncate (ellipsis) by word in React
I'm having problem with truncating a sentence by words. Normally, I'd use text-overflow: ellipsis; for this, but it'll cut the word in the middle.
Try using https://www.npmjs.com/package/react-lines-...
- 31
0
votes
0
answers
37
views
How to do this layout with expo router in a generic way?
I'm using Expo Router to build a web and mobile app, which will also support tablet/desktop screen sizes.
I want to achieve this two panel layout in a generic way that applies to many pages of the app:...
0
votes
0
answers
7
views
instgaram ,facebook app browser does read responsive codes on some smartphones
I build project with Next.js . Some responsive codes does not read through instagram app browser. For example line heights, heigth, i tried wih rem but not effected also wrote -webkit-line-height:...
- 41
-2
votes
1
answer
46
views
Force mobile navigation menu to remain in open state
I want to apply some custom CSS rules to the navigation menu in WordPress's Twenty Twenty-Four theme. When I click menu, the menu appears. When I right-click and select "Inspect" from the ...
- 5,274
0
votes
0
answers
12
views
Graph shrinks after resize() when pointRadius is positive
I encountered an issue where the size of the chart changes unexpectedly when the pointRadius of a dataset is modified. Here's a minimal explanation of the behavior:
Initial state: I initialize a ...
- 1
1
vote
0
answers
58
views
How to create responsive header like the Valorant site?
I just started to code for 2 months and I'm trying to copy the responsiveness of the official valorant website header. I only managed to copy where the header list like [Game Info, Media, News, ...
- 11
0
votes
0
answers
18
views
how can I design product card responsive with 2 columns and sequencially they besides one another and keep no gap? [duplicate]
I want a responsive product gallery where product will be shown with two columns in mobile view and there will be no gap between product cards as marked in the below image. css float property makes ...
-1
votes
1
answer
19
views
Fit/Adjust google ad in mobiles
Im using Google Ads in my site inside a card > inside a container.
The problem is the red circles in the picture. How can i fix this issue? I need to fit/adjust the size of the ad to the card or ...
- 69
0
votes
1
answer
49
views
Not responsive image on phone emulator
I want to make a super optimized website for the pet project. There was a need to adapt the images so that there would be a high-resolution image on PC screens and a small one on phones.
I made a ...
- 1
0
votes
0
answers
46
views
Using window.matchMedia() to handle the different screen sizes and jQuery to update the DOM
When I am using multiple CSS classes on JS, window.onresize isn't working for me.
Tried different solutions on the web to solve but none worked for me.
My codes:
JS:
window.onresize = function(event) {...
- 1
0
votes
1
answer
47
views
Responsive Design for Phone and Tablet
I have an app that I want to support both Phone and the Tablet, but not the same layout as the Phone stretched over Tablet.
Re-arrangement of the layout is expected, just like responsive web, where ...
- 2,180
0
votes
1
answer
82
views
How do I make my navbar items vertical while letting the logo and icon stay on top
It's my first time doing some responsive design and I use this as an excercise. But after trying this for several hours I'm desperate now. So I have a simple Navbar with a logo at the left corner, ...
- 229
0
votes
0
answers
38
views
How to Make D3 SVG responsive in react with viewbox
How can I make my D3.js line chart responsive and scrollable horizontally?
Currently, when I resize the window, the SVG size does not adjust, and the chart is not responsive. The chart width ...
- 5,531
0
votes
0
answers
27
views
Vertical scaling doesn't work properly in React Native
I don't understand how to make my React Native app 100% responsive.
I've looked into it, but overall I haven't found anything better than using Flexbox or scaling functions like these:
const ...
- 1
1
vote
1
answer
79
views
Is there a CSS property that rescale any element like the object-fit: "contains" does on img?
Is there a CSS property that scale down an html element that has a fixed dimensions when the windows size is lower than the size of the content ?
In other words the content should scale down (and keep ...
- 1,527
0
votes
2
answers
237
views
How to make responsive signature pad?
How to make a signature pad canvas in signature-pad.js work responsively?
My challenge is the following:
I either get the cursor positioning while drawing correctly but lose the input on resize
// OR ...
0
votes
0
answers
22
views
Media Queries for Smartphones: Resolving Overlapping Styles
I’m using media queries for two smartphone resolutions given below:
(smartphone 412 * 915 )
(smartphone 385 * 854 )
However, I am experiencing issues with overlapping styles between these two ...
0
votes
0
answers
14
views
How to make bootstrap column align top? [duplicate]
When one column has more content than the others, I want to make sure the other columns in the second row fill the empty space without causing gaps. The other row will also see the same thing. I'm ...
0
votes
0
answers
34
views
Rspec system test for mobile using responsive web layout - how to specify width lower than 500px using chromedriver?
I'm trying to write an RSpec system spec to test working functionality through a responsive web layout that could emulate how one would use things in a mobile.
How do I get the window size to have a ...
- 7,370
0
votes
2
answers
120
views
custom positioning a leaflet control on different screen sizes
I have a rather simple leaflet control that shows the information about markers.
update: added code for the control
const info = L.control();
const initialMsg = 'Click on a marker for more info';
// ...
- 15.1k
0
votes
1
answer
18
views
Website Dimensions not making sense - Laptop VIew
I'm a web developer and I'm working a website. I was viewing the dimensions for it on a
macbook laptop. According to Google Chrome Developer the dimensions for the webpage is 1420 x
373, which would ...
- 95
0
votes
1
answer
64
views
Making object shifted to the side responsive with orthographic camera Three js
I’m trying to figure out the best way to make the position (and scale if needed) of the model across all devices without relying only on match medias. Ofc I can’t use %, so is there something built ...
- 23
0
votes
0
answers
17
views
Using Chakra UI, how do I transform grid A,B,C horizontally to B,A,C vertically responsive
I have a desktop design that looks like this - cards stacked horizontally:
A B C
I would like to transform this responsively for mobile widths using Chakra UI like this vertically:
B
A
C
How can I ...
- 43
0
votes
0
answers
85
views
How do I get Responsive Control values in Elementor, where 'selectors' => [] method can't be used?
I'm developing a custom elementor widget, and I'm trying to set font-variation-settings which includes weight and optical size. Please note that, I can NOT set weight using font-weight property and ...
- 1
1
vote
0
answers
108
views
Collapsing and displaying a menu using html php and javascript
I've started using a grid display. As someone with no sight, I find this makes a lot more sense to me, and on first impression, is much more approachable.
Currently, this is my css code:
body {
min-...
- 45
0
votes
1
answer
54
views
Flutter Web Safari on iOS Simulator keyboard pops again on tap Done button
I have a textfield with number type and for testing I'm running app on responsive web version with iOS simulator. As below in GIF keyboard appears again on tap done. How can i fix this?
Code:
...
- 3,708
0
votes
3
answers
78
views
Overflow wrap does not adjust text width
I want the text div to be centered but the text to be aligned left.
The inner div (#introduction-child) is wider than its content. Instead it should be the width of the text (max-width 80vw).
The font-...
0
votes
1
answer
86
views
Duplicate entries in X axis when Zooming Out on Mui Line Charts
Trying to use the MUI Line Charts and when implementing it make it responsive BUT, for some reason i dont know, when zooming out it duplicates the X axis entries it has, in this case i have the months ...
- 11
-1
votes
1
answer
51
views
Divs with images won't scale on mobile
Working on building a responsive site and I've gotten all my divs to fit mobile other than the divs that contain images. Those are bigger and create an overhang.
The picture shows the issue on #...
0
votes
1
answer
30
views
How to make responsive on Slider Group on Vutify?
Now I am developing simple project, and facing some issues in develop.
I can't make responsive with this slider group components.
This is the source code.
<v-slide-group
v-model="model&...
- 1
-2
votes
2
answers
117
views
How can I make a card like this which is responsive in HTML/CSS
I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I've coded this up ...
- 32
0
votes
1
answer
28
views
CSS Animation for Background not covering 100% responsive height
Hey there I have this CSS code I am trying to inject into a ReadyMag project and while it is "mostly" doing what I want it will not cover odd aspect ratio browswer windows. How do I get it ...
1
vote
0
answers
18
views
Can I override Highcharts legend auto changing?
I have a highchart graph (codebase is react) with the following legend layout:
But when the screen gets small enough, it auto flips to be:
I have tried adding "layout: 'horizontal'" in ...
0
votes
0
answers
29
views
Responsive Form Layout Issues on Small Screen Widths
The form layout works well on most screen sizes, shrinking as expected, but at 260px width, it stops shrinking and starts overflowing the viewport. I've checked the CSS for any fixed widths, padding, ...
0
votes
0
answers
59
views
How to make a gt table responsive in a quarto website
I would like to hide a couple of columns of a {gt} interactive table in a quarto website, given the condition that the screen is smaller than certain amount of pixels.
In this example I want to hide ...
- 668
0
votes
1
answer
33
views
Flutter: Popup Resize when keboard apears issue in fluttrer
I'm facing an issue with popups in my Flutter app. When the keyboard appears, the popup resizes and becomes difficult to interact with.
**
Screenshots:**
image without apearnce of keyboard
when ...
0
votes
1
answer
28
views
CSS Positioning - Content overlapping Image
Here is the HTML and CSS below. The content keeps overlapping image. The end goal is to have it responsive. It use to work, but all the sudden I cannot get it to resolve. Used AI, used online ...
- 25
0
votes
2
answers
35
views
Error with HTML background video in responsive design
I'm creating a page for a local event and I made a countdown with a video background. However, when I try to make it responsive, it zooms in enormously and it is not possible to see everything on the ...
- 3
0
votes
1
answer
39
views
Trying to change max-width + display: grid in media query
im building this small page mobile first, which works. however, on full page i want to change the max width of my heading, and change the card-container to display: grid as i want to position them ...
- 39
0
votes
0
answers
33
views
How can I make my next app responsive on iPhone?
I've made a webpage using nextjs which is responsive using media queries, works really well on safari using mac and at Firefox as well.
but when I try to open it on iPhone the images have a completely ...
- 11
0
votes
0
answers
161
views
How to show a phone mockup in Desktop view in React.js
I have a MobileView component that uses the DaisyUI phone mockup to display a Home component within a mobile device frame:
<div className="mockup-phone">
<div className="...
- 307
0
votes
0
answers
39
views
¿How to fix the responsive menu in boostrap?
in the inner page of this site the responsive menu is not working because I have to change the main menu in the inner pages (not in the home). When you turn on the inspector in your browser and ...
- 47
0
votes
0
answers
39
views
Scale grid gap with size of grid
I want to make these displays more responsive with grid, so I add media queries to make them shorter but in turn their gap becomes much bigger on the grid.
How do I lessen the gap on smaller sizes?
...
0
votes
0
answers
55
views
Media Queries Max-Width is not applied even though I am on mobile view (Browser)
I have a website in Astro and using SCSS.
I have a weird bug with the media queries.
I have this styling
@media screen and (max-width: 768px) {
.p-content {
&_inner {
...
- 1,050
-2
votes
1
answer
31
views
How can I make this div container reponsive, media query tends to show no effect on its width
I am trying to make a container that contains some commands for my bot. Everytime the screen size reduces, the container and the element messes up. Ps for some reason, width property doesnt work on it....
