Questions tagged [responsive]

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
1

votes
2

answer
2.5k

Views

display:inline-block not working outlook/gmail

I'm developing email templates and I need to use display:inline-block but it's not working on gmail and outlook. I just need to align an image with a text and I can't use a table . Any suggestions to make the display:inline-block work or any other solution that works on outlook and gmail? this my co...
xzibit15
1

votes
0

answer
249

Views

Change Component Margin with VueJS

I have a very basic VueJS sidebar component. I am also using TailwindCSS. I have a navigation component with a button. The button is clicked an emits an event called 'toggle' triggering the 'toggle' method on my sidebar. My sidebar is closed on mobile and open on desktop using TailwindCSS responsiv...
jhine
1

votes
0

answer
42

Views

How to fix the bug related to scroll bounce effect on mobile?

So this error is related to scroll effect. As I open my website (https://bobobee.com) on a mobile browser and scroll down, it often gets stuck and bounce back. This started happening after I enabled Auto Adsense Ads on the site. I am not able to figure what exactly is causing this error and how to...
Ahsan Mirza
1

votes
1

answer
141

Views

display: inline issue with line height: too much spacing between lines at small browser dimension

I have 2 'span' blocks of text, which I want to 'merge together' using display: inline. However, I want the line height to be consistent regardless of the browser size. For the font size, I'm using 'vw' units, since I want it to scale according to the browser width. https://jsfiddle.net/darrengates/...
Darren Gates
1

votes
0

answer
49

Views

Javascript canvas animation not working properly when canvas is heighr than screen size

I have a javascript canvas animation that I am using as a section 'background'. I have set the canvas width and height to the same as the sections height and width with javascript and it works. There is another div inside of a section (besides canvas) and I have set the sections height to never be s...
1

votes
0

answer
34

Views

To let icons and text under it in the same place every screen size

I use this html code: Tested operating systems in top 5 web browsers including mobile and desktop And this is the css: #icons-wrapper {width:100%;height:100%;margin-top:-13.5%;transform: translateX(50%);} .center-icons1 {display:inline-block;margin-left:3.69%;} .center-icons2 {display:inline-block...
user9356960

View additional questions