Questions tagged [responsive]

1

votes
1

answer
34

Views

Responsive polygon (triangle) SVG

I'm trying to build a page with 2 polygons, but i'm facing some problems with aspect ratio on mobile or tablet mode. Check the codepen and resize the window, you will see that the red triangle doesn't keep correct shape as well as the icon inside. Would be really nice if you can help me to accomplis...
Lucien
1

votes
3

answer
33

Views

My Menu & Logo Image need to stretch to the very edge of the screen

I have a website logo which sits under the menu which I would like both to stretch to the very edges of the screen regardless of the size screen viewing website. For the image I have tried many things including width: 100% and trying the background: cover; taking it outside of the etc. The html cod...
qwpozxmn
0

votes
0

answer
5

Views

Responsive Design Testing using TestCafe

As part of evaluation for a new test automation framework, I am looking to see if we can automate testing for responsive designs of a website. To give you a better idea, today we use the GALEN framework to do this. Our tests cover things like pixel points, height, width, colors, sizes of containers,...
Monnie_tester
1

votes
3

answer
55

Views

Responsiveness- How to control PC display's scale and layout with CSS?

so far when I have been trying to create responsive websites I have always used media queries to control the screen resolutions. However, while most PC screens have 100% on their scale, many laptops are 125% or even 150%. Is there any way to add CSS attributes designated only to those with a 150% sc...
Rozi Buber
1

votes
3

answer
31

Views

How can I move to a new line the last word of a <h1> sentence on mobile, and in desktop mode break the sentence in 3 lines?

I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop: Grow your business faster , and in mobile, it must look like: Grow your business faster I haven't been able to figure out the way to do this. Can you give me a...
Julio Rodríguez
0

votes
0

answer
10

Views

Background image looks different on mobile device than on mobile preview in PC browser

I have a background picture of some random apartment for my website and it looks good on PC and on mobile preview on PC(using Firefox Developer Edition). But when I open it on my iPhone 7 it does not look good, it just shows top left corner of an image. This is how it looks on my PC: And this is how...
mememanyes
1

votes
1

answer
31

Views

How do I correctly implement Android Viewport Spoofing?

I've recently built an app that uses a full screen web view to load a website I don't own. (Therefore, no control of site code) I need the webview to display a desktop version of the site, and desktop http header spoofing didn't do the trick. I found that it's the viewport size that determines wheth...
Matt Zabojnik
1

votes
0

answer
41

Views

Bootstrap v4.0.0-beta.3 carousel + responsive images maintaining aspect ratio

I use Bootstrap v4.0.0-beta.3 and I try to build a slider using bootstrap carousel component. I have a problem with forcing the carousel to make images to cover the whole visible screen while keeping correct image aspect ratio. Here is my code: body { font-family: 'Roboto', sans-serif; font-size:...
Jacek
1

votes
0

answer
602

Views

Datatable column headers missing when vertical scroll is enabled

Below is my datatable initialization $('table.datatable').DataTable({ scrollY: '150px', scrollCollapse: true, fixedHeader: true, bFilter : false, paging: false, bLengthChange : false, pageLength : 5, 'language' : { 'zeroRecords' : 'No Requests found' } }); I want to have vertical scro...
Nevin
1

votes
1

answer
67

Views

Creating responsive flexbox layout containing images in a certain pattern

I am trying to create a responsive layout containing images using flexbox. I have achieved the pattern that I want to but it is not responsive. Following is the pattern: https://jsfiddle.net/wcep5tuk/16/embedded/result/ Even though the pattern looks okay, upon resizing the window, everything falls a...
John Smith
1

votes
1

answer
80

Views

Updating both srcset and src

If I am using the function below. Would this be the correct way to update both the src and the srcset attributes? $('#Image').one('load', function() { //code }).attr('src', 'img/my-new-image.jpg').attr('srcset', 'img/my-new-large-image.jpg x2');
user2238083
1

votes
1

answer
323

Views

In iPhone 6+ gmail app email template is not responsive, else everywhere it is working fine

I am having an issue with iPhone 6+ Gmail app in that particular device I am getting a responsive issue, my email template is not responsive in that device else everywhere it is working fine. can you please help in this condition
SHAHIL MISHRA
1

votes
1

answer
271

Views

Media query width 100% not working

Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so. My media query is as follows: @media only screen and (max-width: 540px) {...
Spencer Ryan
1

votes
0

answer
125

Views

HTML5 srcset and sizes downloading 2 images

I want to download the 80w image on screens with a max-width of 991px and the 160w image on screens with a min-width of 992px. With the code below both images are downloaded on screens with a max-width of 991px, what is wrong?
Gabriel Souza
1

votes
0

answer
39

Views

creating mobile menu in php vs in js

Up until now I always tackled the issue of mobile navigation the same way: Create the menu in php and then manipulate it using css, media queries and js, to act as a mobile menu, when the screen size is narrow, and act as a normal navigation when you are viewing the site on a desktop or a device wit...
D. Dan
1

votes
0

answer
115

Views

Nartive Android SmartApp Banner

I have to add the native smartapp banner on a responsive website but I don't know why it's not working on my localhost (and in production). I followed these steps : Create a manifest.json which contains this code { 'short_name': 'Toupargel', 'name': 'Toupargel', 'related_applications': [ { 'pla...
sseggio
1

votes
0

answer
64

Views

Bootstrap and responsive image

I have the following structure: https://codepen.io/anon/pen/yvYLpq What I want to achieve is to make the image go left with overflow: hidden when I resize the page. It should look like this: https://codepen.io/anon/pen/VQvwEj So basically I need to increase margin-left when I resize the window. So m...
Vasiliy Ermolovich
1

votes
1

answer
54

Views

Maintain ratio of container and children while resize

I have modular grid of cards with and without image, based on flexbox. Normally cards without image are 50% of the width, cards with image are 100% of the width, and those cards without image that doesn't have a pair are also 100%. ---------------- [[ txt ][ img ]] – card with an image -----------...
Default Account
1

votes
1

answer
93

Views

How to make the Google maps API floating panels responsive?

An image of the map on a mobile: Map I have tried the following Css and HTML but I couldn't make the floating panels show when the map is used on a mobile. Is there anything I can change in the CSS or html to make the floating panels responsive please ? #origin-input, #destination-input { backgrou...
Maria Ellul
1

votes
0

answer
207

Views

Safari 10.0.1 not choosing correct image from srcset

Safari is not handling srcset correctly for some of the images on my site and is completely ignoring the rules I set in the sizes attribute. If you click on the link below and view it in Safari, you will see the images at the top are being displayed at their original sizes rather than the size I gen...
Shaun
1

votes
1

answer
81

Views

Make scrset for landscape and portrait switch properly

I need to display a full screen image at the top of my page and naturally on mobiles when orientation is changed from landscape to mobile I need a different version of this image. I then created multiple versions for landscape and portrait mode. It works fine when the browser loads the page for the...
Tomasz Kluczkowski
1

votes
0

answer
93

Views

Responsive layout background in Android (Vector)

I need to change background my layouts to something like a folder ( see attachment), and I need it to be vector, so folder name tag be always in same size. I can't use 9 patch since I need it to be vector.
AVEbrahimi
1

votes
0

answer
696

Views

Difference between <img> and <picture> regarding responsive images [duplicate]

This question already has an answer here: HTML picture or srcset for responsive images [duplicate] 1 answer picture (source) element VS img srcset attribute 3 answers I'm doing the MDN HTML tutorial, in the responsive images section, I came across this: And this What's the difference between the t...
MichaelX
1

votes
1

answer
83

Views

Unordered-list inline vertical alignment and responsive spacing

I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am usin...
Ryan H
1

votes
1

answer
49

Views

Modifying behavior of yAxys component with media queries

I am creating a responsive chart with ECharts, and as a way to improve the user's visual experience I need to remove the intermediate values ​​between the 0 (min value) and 1 (max value) displayed on the yAxis: This is my code: media: [{ query: { maxWidth: 500 }, option: { title: { textStyle: {...
Sávio Raires
1

votes
0

answer
602

Views

Can't get FitVids to work, getting “$(…).fitVids is not a function” error

I have a react app I made using create-react-app. I have some videos on the site and I'm working to make the app responsive. I found the FitVids library (https://github.com/davatron5000/FitVids.js/) which is supposed to do exactly that but I haven't been able to get it to work. I think I'm botching...
akorn3000
1

votes
0

answer
38

Views

Responsive label-value list/table flexibly adapting to the actual width of the rendered data

I'm struggling with a CSS-layout problem I could find several solutions working under certain assumptions but so far I've been unable to find a solution leading to the desired result under all circumstances I am supposed to handle. The basic situation seems simple at a first glance: I have a label-v...
Stefan
1

votes
4

answer
57

Views

Avoid UIImaveView stretchs on different devices

I need to set a background image in the storyboard in my iOS project, the problem is that I don't want image to stretch on different screens, for example, if I use an iPad I will see a stretched image, which is not really comfortable with the representation of the other components in the page. Is th...
Alessandro Pierro
1

votes
0

answer
60

Views

html Responsive two different image

As you can see, when one image finishes the animation the second image appears on top of it. How do I adjust the same parts of two different sized images to be responsive at the same rate? $(document).ready(function() { setTimeout(function() { $('#animate-img2').addClass('hide'); $('#animate-img'...
David seong
1

votes
2

answer
71

Views

html image responsive-design

I have a problem adjusting the size of an image I made responsive two images using '%' one image just has a one circle, the other is one circle + one square6 the circle of images is same image because when first image finished animation, second image is animated on top of it when I resize website...
David seong
1

votes
0

answer
249

Views

How to set a minimum width in a responsive Gridview in asp.net while using ControlStyle

I have a gridview with a custom css that makes it somewhat of a responsive table so the table columns shrink when the screen is reduced in size. The problem I have is when shrinking the screen I don't want the columns to reduce so far that you can't see them anymore and would like a minimum-width a...
jroyce
1

votes
3

answer
53

Views

CSS Responsive Design Assistance

I'm hoping that this question can be a jumping point for helping me understand responsive design. Consider a header on a typical desktop screen. I have a div that will contain the information I want to display: .hdrinfo{ width: 51%; margin: 0 auto; display: flex; flex-direction: row; } When the di...
Elcid_91
1

votes
0

answer
60

Views

Setting Constraint programmatically like in storyboard

I need to set constraint to have a view equal height with multiplier 0.8 I use this code override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) { if(presentationStyle == .compact){ let videoController = recordingController.videoController let containerView = videoControl...
Alessandro Pierro
1

votes
3

answer
201

Views

Bootstrap div below each other and then beside each other in mobile view

My layout is relatively simple. There is a header at the top, nagivation bar with an image inside a column on the left and the content at the right. When I switch to a mobile responsive view, I want the navigation column to display the nagivation list and an image side by side instead of top and bot...
Rithesh
1

votes
1

answer
225

Views

Div background image scaling on iPad Pro landscape

Trying to fix the issue with the background image for my title div to make it fully responsive. Issue is: the size of the background image blows up on iPad Pro in landscape. It works correctly on desktops, also shows up correctly in Chrome Dev tools for responsive/iPad Pro landscape. The only instan...
Rita Agafonova
1

votes
2

answer
246

Views

bootstrap cards spilling over rows and affecting margins of other elements

NB I'm new to programming and this is my first post so please excuse any misleading code or confused terminology etc. I'm playing around with bootstrap cards on a blog template and I'm trying to separate two rows so that the height of an element in the first row doesn't affect the position of an ele...
jbowman
1

votes
4

answer
112

Views

How to achieve the particular layout without distortion using Bootstrap 4

I need to design following design layout with help of Bootstrap 4: My code : A B C My output I am not getting my exact design layout. B and C part getting distorted. I have tried to set height for the container. But it does not solve my problem.
Kiruthika
1

votes
1

answer
41

Views

Finding a better way to implement navigation bar which has subcategories

I'm building a navigation bar. The link below is what I just have completed so far.https://jsfiddle.net/dsdzyp23/2/ RUNWAY WOMEN MEN CHILDREN WOMEN Cruise 2018 Fall Winter 2017 Runway Pre-Fall 2017 MEN Cruise 2018 Fall Winter 2017 Runway Pre-Fall 2017 UNSKILLED WORKER Cause my subcatego...
hayley
1

votes
2

answer
59

Views

Flexbox and the annoying scrollbar

I'm trying to build a (responsive) website using flexbox. The text-boxes in the have to be fixed and are basically the navigation. The only moving part of the site is the text in the center that scrolls vertically and flows over the viewport height. I essentially want to give the illusion that the t...
Unknown User
1

votes
1

answer
1.7k

Views

Scaling a page proportionally (including media queries)

What I want to do is to be able to programmatically scale a page up or down and the tricky part is that I want the media queries to be scaled at the same rate as well. So if I scale up everything in a page by a factor of 2, a media query that used to fire at 400px should now fire at 800px. Things I...
Se7en

View additional questions