Questions tagged [responsive-design]
Responsive Web Design (RWD) is an approach to Web design and development that aims at crafting sites to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.
16,709
questions
0
votes
1
answer
13
views
Tailwindcss doesn't work on mobile device and google chrome devTools, but works on desktop and safari devTools
so I use Tailwindcss for my project.
I was developing with desktop, and RWD is working on Safari and google chrome.
but when I changed to devTools it just doesn't work.
Same as mobile device.
for ...
0
votes
1
answer
22
views
Trouble using multiple CSS media queries
My code is below. At the end of this CSS file, I've used two different media queries as break points for two different screen sizes. However, only the first is taking effect. The second has no effect ...
0
votes
0
answers
35
views
HTML/CSS HELP! How do I make this a responsive site? [closed]
I am a beginner in HTML5 and CSS3, how do I make my project responsive? All general tips to improve this is very kindly appreciated. If there things i need to fix, please specify them in clear steps ...
-1
votes
0
answers
19
views
Enable responsive mobile site layout when width is less than 390px [closed]
I have a desktop version of the responsive website:
photo
If the screen width is less than 390 pixels, then the mobile site layout should be included:
photo of mobile layout
For some reason, when ...
0
votes
0
answers
28
views
breaking the design when minimizing the screen
when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
...
-1
votes
1
answer
27
views
Anyone know how I can make this half circle menu for my html website? [closed]
this is my reference/inspiration
I have a motorcycle shop website an I found this very creative menu for a bike shop online. I was planning on implementing it in my motorcycle website but I don’t know ...
0
votes
0
answers
12
views
Is it important to write ascending or descending when using Fixed-range breakpoints in Tailwind CSS?
Here is my tailwind.config.js file , I have no problems in breakpoints but my teammate has problems in breakpoints like 767px and the browser will apply the styles from both "sm" and "...
0
votes
1
answer
45
views
image doesn't resize based on the container it's in. What am I doing wrong?
I'm just trying to get an image to resize to stay within it's div, but it continues to spill over onto the div below when I reshape my browser size or view in my laptop.
I haven't set any fixed ...
0
votes
0
answers
19
views
Customizing already built design system src code once, and use it in many projects
Greeting dears,
May I ask if we can clone Material UI (Angular components) and customize the src code of the design system, then we want to have the updated src code on our on-premise gitlab?
The ...
0
votes
0
answers
17
views
React Native with Typescript for web, responsive to mobile
I'm using "Monorepo" for building a web and mobile application together, and I want that on the web display, if opening the application on the mobile it will be responsive and will display ...
0
votes
1
answer
33
views
Hide icon before text on overflow
On my Website I have some tiles to show some content. Depending on screensize the number of tiles per line is changing. Each tile has a button with an icon and text inside.
My problem is that on some ...
1
vote
1
answer
42
views
How to solve over- and under-lapping elements and/or divs in responsive design?
I'm currently in an online class in web-design, I'm a beginner and I struggle to finish the second "project" which involve rendering a website design in html and css with responsive element ...
0
votes
3
answers
37
views
Css responsive not working when deployed on server
I made a responsive home design with only html and css. When I deploy it locally the responsive part works perfectly, so I sended the files to the owner of the page, but he told me that the page wasn'...
-1
votes
3
answers
40
views
how to handle different screen sizes with flutter app
I'm doing an app that can be used on Apple, Android, web and desktop so for many different screen sizes - phone, tablet, laptop, desktop etc. Is it reasonable to design for say three different ...
1
vote
1
answer
18
views
How to open link in new tab in same group in chrome from code?
Chrome gives the option to open links in new tab in same group.
I want to open an a tag link in my website in a new tab in the same group in chrome. How can this be done from HTML code?
0
votes
0
answers
20
views
Dynamically change font-size within parent element with no overflow [duplicate]
I have a parent element which is set to display: grid with an image for the background of the section and a child div within this section that spans the entire size of the grid and contains a h1 and ...
0
votes
1
answer
36
views
Can I set an image as a grid item?
I have grid with 3 elements like this:
Now I want to replace blue elements with images (could be just dummy images).**
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-...
0
votes
1
answer
20
views
Display a different version of the background image on mobile devices
currently i can see the full screen image on desktops/laptop browsers, however i am trying to work out how to show a different image (because for now its just an image and there is no layout as its a ...
3
votes
0
answers
58
views
How do you make CSS rotate dynamic?
I'm trying to figure out how to dynamicaly change the rotation angle of my two h1 elements to match the angle of the black line in the center of the page as the page shrinks and grows. How would I go ...
0
votes
0
answers
32
views
Media Queries in CSS file not working on Safari
My responsive design is working in every browser but Safari. Here is a screenshot of the code in the main file and in the CSS file. Is there something I have missed? Why isn't this working?
I should ...
0
votes
0
answers
35
views
How can I make an Lottie Animation fill the Screen with CSS?
What I'm trying to achieve.
Basically after a bunch of playing around with CSS I failed making it possible and found nothing on the documentation of Lottie Library by AirBnb.
I'm using the lottie ...
0
votes
1
answer
23
views
The values I entered for Bootstrap media query breakpoints are not valid
<div class="container-fluid ">
<div id="trip-carousel" class="carousel-fade carousel slide" data-bs-toggle="carousel">
<div class="...
0
votes
0
answers
20
views
Align the icon and text to mobile version in elementor
I've designed a Light store website by using elementor. I need to arrange the features section in one line like Desktop view. on mobile view mobile view this is the default. I tried to do it by ...
0
votes
1
answer
41
views
Flutter: How to do responsiveness for "real" mobile/web applications?
I saw many articles and videos on how to do responsive design in flutter.
But they all have in common, that they show a standard web page with menu, pictures, text.
What I call "real" in the ...
0
votes
0
answers
38
views
Material-Ui - CardMedia : LazyImage with Skeleton and inferring dimensions
I would like to build a component CardEntry in a flexbox context.
Inside this component, I have a CardMedia with a child named LazyImage.
LazyImage has a Skeleton when image is loading.
The guidelines ...
0
votes
0
answers
21
views
How do I get my text to cover the entire Carousel Caption class?
I created a carousel with Bootstrap. I also placed a text in the middle of this carousel. But when I try to select the text with the mouse, it starts to select from the surrounding blue area in the ...
1
vote
1
answer
24
views
My page seems to have right padding or margin when scaled further down?
My site is fine until I go lower than 723px wide then a white margin appears on the right side of all of my background colors. I have tried to go in and delete margins and padding to see where I have ...
1
vote
1
answer
33
views
Flex wrap limit number of rows [closed]
My front makes an API request and retrieves a number of items. With these items a flex grid is built, for example like this:
It is a responsive web and I would like to always have 2 rows, regardless ...
0
votes
0
answers
32
views
CSS media query break points
I've been working on some web lately and now I'm on part that I have to make my header and footer responsive. I've done some research of common media query breakpoints, but I can't find answer to my ...
0
votes
0
answers
11
views
Web app mobile version after deploy is rendering with bugs [duplicate]
I have very different presentations of my web app design using dev tools mobile device on a desktop browser and my app design using a real mobile browser after deploy.
If you run my project from ...
0
votes
1
answer
29
views
I add the order element in the css, but the positions do not change
<section id="home">
<div class="container">
<div class="row align-items-center container-items">
<div class="col-md-6">
<...
-1
votes
0
answers
20
views
hi guys ,i don't know why the row take this all space(the green part) ,i tried everything but this space didn't remove
enter code here
Container(alignment:Alignment.topLeft,
color: Colors.yellow,
height: 700,
width: 300,
child: GridView.builder(
// physics: NeverScrollableScrollPhysics(),
// shrinkWrap: true,
...
-3
votes
1
answer
25
views
I am new in coding so please help to solve this issue. As I attached a photo. After the last card I need some space that I cant do [closed]
enter image description here
I need some space after the last card so please help me with that.
0
votes
1
answer
60
views
Display stars rating around rounded profile image [CSS]
Hi guys i'm creating rating system and i want to display the stars elements around profile image. I have profile image set to border-radius 50% which makes it rounded, but i'm struggle to set the div ...
0
votes
1
answer
34
views
Responsive design for divs
I have the following HTML code (the number of divs within the .container can vary).
I want to give these a min width, but otherwise these should fill up the whole width of the screen. When the width ...
1
vote
2
answers
34
views
How to create responsive table in which schema of table changes on break point using bootstrap or without bootstrap?
I want to create a table which will get changed its schema on mobile screen breakpoint.
On big screen like laptop table should look like this:
Email
Degination
Team
Last Active
Location
alok@...
2
votes
3
answers
58
views
make images same size without manipulating their size individually?
I am trying to put some logos in a row and a div wraps each logo the problem is that When I am giving a specific width to all the logo wrapper Divs some are becoming small and vice versa (I know it is ...
0
votes
0
answers
37
views
How to set text in the slider?
https://www.npmjs.com/package/react-native-slider
I am using the above package for slider & i want to add the value in the slider.
How can i add the value in the slider
As you can see in the below ...
-1
votes
1
answer
29
views
Responsive image to cover whole page
i am trying to add image to my website page to cover whole page in any screen size
*{
padding:0px;
margin:0px;
}
img {
width:100%;
object-...
0
votes
1
answer
23
views
Why H1 interfering to the navbar in mobile version?
I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, ...
0
votes
1
answer
28
views
Issue Relating Responsive Webpage
I am a beginner of HTML&CSS learner. I am stuck with making my webpage become responsive. When it is a screen view of phone, my page cannot fix with the page, it still have a big space at the ...
1
vote
1
answer
35
views
responsive div height on conditional rendering?
I am working on a react project, where I want to conditionally render a div above an existing div that currently covers the screen with an image. I would like the existing div to reduce in height, by ...
0
votes
1
answer
39
views
Swap out Bootstrap elements based on screen size
I was wondering if there is a native bootstrap method to dynamically change the class of an element based on the screen size.
I am developing a web page that has multiple card elements containing ...
0
votes
2
answers
42
views
How can I reduce the color transition distance in my radial gradient?
I'm trying to get a white circle that should be razor sharp on the inner edge. I think I have managed at least that. I want the black inner surface to contain the content (preferably almost seamlessly ...
-1
votes
1
answer
40
views
How to best implement a responsive image size in an Angular app
I have created a card component in Angular. This component shows a profile picture, the size of which I want to change depending on the screen size of the device my app is running on. Knowing no ...
0
votes
1
answer
35
views
How responsive works?
Why we have breakpoints for 400px or 600px, for example?
These breakpoints are verifying the resolution of the device, but now smartphones have resolutions such as Full HD (1920 x 1080 ) or 2k (2560 × ...
-1
votes
1
answer
25
views
CSS RWD with uneven boxes [closed]
I have six uneven boxes, each has margin of 50px and they lined up to three columns. Is it better to use flexbox or grid of these kinds of problem? and How to change them from three columns to two ...
0
votes
0
answers
34
views
Hugo Image Resize
My repo: nataliepjlin/up (github.com)
I want to use the percentage of width to make the image responsive just like the screenshot did.(this was changed in the inspect window)
While using the code on ...
-1
votes
1
answer
47
views
website only renders on half page on mobile devices using NextJS and Tailwind
Perhaps a bit foolishly, I have chosen to do my portfolio site with two technologies that I have never worked with before - Tailwind and NextJS.
while developing the portfolio, I have opened it via my ...
1
vote
2
answers
55
views
Convert all occurrences of px to rem for responsive design
I am a noob web developer and made a big mistake.
I am creating a website for a college project, it needs to be responsive. I have tons of CSS written all in px units. But now for responsiveness, I ...