Most voted "responsive-layout" questions
Responsive Layout is an approach used to develop user interfaces, providing great viewing experience, easy reading, navigation and adaptability to a wide range of devices (from computer monitors to mobile phones).
Learn more…235 questions
Sort by count of
-
1
votes1
answer330
viewsCSS Media Queries (several statements followed)
Hello, I want to know if it is possible to get a cleaner and more compact solution of the following CSS. @media screen and (min-width: 630px) { .tab ul.login{ right: 29%; } } @media screen and…
-
1
votes1
answer225
viewsscroll with position:Fixed losing the right margin
When I scroll down, the div#chat, is fixed everything straight. However the problem is that the layout breaks losing the right margin. How can I solve this problem? $(document).ready(function() {…
-
1
votes1
answer1102
views@media in CSS does not work properly
I have two CSS links on my site: The normal layout, and the "responsive fixes" with @media. To do the tests with different screen sizes, I’m using Firefox’s Resposive Design Mode. When I did the…
-
1
votes1
answer153
viewsProblem with Media Query
Does anyone know how I can specify a Media Query for each device ? I’m trying to leave the iphone 6, 7 e 8 in a way and in the same cell phones only Plus version I’m changing to suit the layout only…
-
1
votes1
answer747
viewsAdjust list of products in Woocommerce, to align correctly
My store has the following look And I would like to align the products correctly, because the look is not cool. How could I do that?…
-
1
votes0
answers179
viewsResponsiveness in HTML CSS
I wrote my portfolio a while back and tried to make it responsive. I used the Mobile First technique. In cellular resolution it got massive, but when I made the first responsiveness to 600px wide…
-
1
votes1
answer579
viewsHow to declare and use the @viewport rule?
I’ve been reading that the meta viewport has better implementation by Rule viewport CSS, but it’s still confusing for me...
-
1
votes2
answers879
viewsLoad javascript depending on the viewport?
It is possible to minimize the download javascript depending on the viewport? I can put different CSS files to be loaded just by checking the size of the viewport for example. I’m with a virtual…
-
1
votes1
answer164
viewsImage transition css and html
Guys, I’m starting to get interested in html and css, I’ve been studying and taking a course, and I’m doing this site. I put a transition for when it scrolls the sidebar, but I wanted to be smoother…
-
1
votes0
answers14
viewsAsynchronous content for mobile
I am working on a new website project, where some areas will need a special html treatment for presentation. For example: for the desktop, we have a 1920x800 image carousel, while on mobile, I want…
-
1
votes2
answers1047
viewsProblem with CSS media queries
I’m trying to make my application run on smartphones, beyond the desktop standard. But I can’t get the media queries to work properly. It’s only working until the size of the tablet screen. When I…
-
1
votes1
answer26
viewsProblems with site resizing
Good afternoon! I’d like your help with a personal website project of mine, I’m facing one or two problems with it, but let’s start at the beginning. First: When I resize the site to below 375px…
-
1
votes1
answer1363
viewsSelect all Children except First with css
<div class="main"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div…
-
1
votes1
answer696
viewsRestful site, when resizing the elements go to the bottom of the page
The page has only one photo in the center and some texts. I added a Media Query so that when the viewport is less than 700px it increases the images, but when I decrease my screen, it explodes...…
-
1
votes0
answers47
viewsHow to use different images in the background-image, according to screen size?
I’m optimizing a site and wanted to know if I have how to use different background-image according to screen size. For example, screens larger than 640px use the image /referent123/original.jpg and…
-
1
votes1
answer22
viewsResponsive e-mail
We bought a responsive email template, it got 100% responsive, but in email apps like gmail’s footer goes missing, a click of "see the whole message" By breaking the scroll and opening the desktop…
-
1
votes0
answers94
viewsRecognition problems of first faces Responsive mobile
Error in recognizing Primefaces Responsive mobile. I’m using Primefaces 5.3 and functionality Grid CSS works perfectly on the Desktop, as seen in the images below. Maximized Restored But…
-
1
votes1
answer285
viewsFixed footer below a form
I’m having a problem with the code of this site www.forcaemovimento.com.br I have a form that has some div’s with position:absolute to do the side effect. The problem is that the footer is behind…
-
1
votes1
answer48
viewsThe tab is going through the reset button
I wanted the tab to stop just below the FREE THROW buttons, not at the bottom of the screen. How Do I Fix So Design Is Responsive? Because the content gets messy when the screen is in Landscape…
-
1
votes1
answer226
viewsMobile responsiveness with bootstrap-material?
I’m using bootstrap-materialon a system, if I use the browser not maximized responsiveness works. But on mobile devices not. Someone knows what might be? Styles <link href="{{…
-
1
votes1
answer141
viewsAndroid Button below a fixed-size Viewpager
I’m creating a layout where I need a button below Viewpager, in this layout I also click tabs, as in the image below: What happens is that I can not leave this way without being fixing the size of…
android android-layout responsive-layoutasked 8 years, 3 months ago Renan Vinícius Quadros Barbosa 31 -
1
votes0
answers295
viewsUsing "in" (or "rem") unit for responsive layouts
Reading some CSS articles on responsive layout I managed to understand some new "concepts", but some applications were still a bit confusing for me, which is the case of the use of em (or rem) to…
-
1
votes1
answer258
viewsDifferent responsiveness between browsers (Webkit & Mozilla)
I use Bootstrap 3 in my project. I used Mozilla throughout the creation process, and the responsive design works great on it and Edge. When I went to test the pages in browsers that use Webkit…
mobile bootstrap-3 responsive-layout firefox webkitasked 7 years, 11 months ago Mateus Bandeira 212 -
1
votes0
answers268
viewsResponsive canvas effect
I have a responsive web page where I have a light effect using the canvas. It turns out that the effect should remain only on the banner area, I did here a method using the negative margin-top, but…
-
1
votes1
answer83
viewsImages overlapping when resolution changes
I have four images side by side, but when I readjust the resolution, they’re overlapping one by one. I would like them to adjust but remain side by side as the resolution allows them to remain see…
-
1
votes0
answers291
viewsBootstrap Jumbotron: sidebar with full width
I don’t know much about responsiveness but I still wanted to create one of those layouts that look "normal" on the PC, but the smartphone has a hidden side menu, visible by clicking a link on a…
-
1
votes1
answer374
viewsLeave image with responsive text
Hello, I need to insert a text on top of an image, which is responsive in the correct place of the image, until then it is working "well", but the site is done in bootstrap, and when it comes out of…
-
1
votes1
answer5564
viewsCSS Grid Layout - How to horizontally center all elements across all the Grid Lines of a Sub-Grid?
I am working on a college project and we are using Grid Layout to design an e-commerce for animals. A doubt arose during the creation process regarding the centralization of the content of grids in…
-
1
votes1
answer45
viewsHeader does not get responsive in 320PX using Flexbox
I am starting to use flexbox but I have a giant problem that I cannot solve in several layouts. Both the header and Nav and li are hidden in the Mobile Solution, Iphone 320x568 and there is a white…
-
1
votes1
answer645
viewsPrepare mobile responsive Iframe or embed
Guys I have a project c# MVC5 and my scenario is as follows: I have to open in a friendly url a large series of pages (with media content) made by third parties. One at a time clear (according to…
-
1
votes1
answer277
viewsCSS - Position: relative; VS Position: Absolute;
Good evening guys I’m having a problem in a matter of leaving my site Responsive. What happens is the following... I have my menu, which contains 2 LI "ADD VALUE" , "ROUTINE". And I want to make…
-
1
votes3
answers1706
viewsHow do I pass the time from one div to another?
I have this problem: the text is responsive, but how do I make the red divide the same size as the gray div next to it, as I decrease and enlarge the screen? There is a solution with CSS or with JS?…
-
1
votes1
answer493
viewsTurn card to Carousel when resolution decreases
I have the following card system made with bootstrap 4, each occupying 4 columns. But I need that when they go to the mobile they see a Carousel, I’m trying to use the Owl Carousel, but I need it to…
css twitter-bootstrap responsive-layout owl-carouselasked 5 years, 11 months ago Guilherme Rigotti 1,087 -
1
votes1
answer118
viewsHow to make sliders created with bootstrap, get responsive in all screen sizes?
The banner of my site is running well on monitor up to 15 inches. From resolutions above these banners get very large and generate horizontal bar on the site. As in the image below:…
-
1
votes1
answer494
viewsProperty col-Xs does not work
I’m developing a website using Bootstrap and HTML, I’m gonna make you flexible for the desktop and mobile platform. However, I cannot understand why the property col-xs(phones) not work. Follow the…
-
1
votes0
answers238
viewsUse a lot ul/li on bootstrap Nav or use links and style in css?
I’m recreating a menu with bootstrap 4.5 for better learning and I was left with a question. I have the following nav for example. The proposal is to recreate this menu in a responsive way with…
bootstrap-4 responsive-layout nav-bar semanticsasked 4 years, 4 months ago Marcielli Oliveira 1,597 -
1
votes1
answer232
viewsResponsive table with scroll if screen is smaller than data
I am having difficulties in a certain responsive point of the site I am creating. I need a north. In this image the side menu is closed, occupying less space. As my div has fixed size it remains the…
-
1
votes1
answer22
viewsbackground-size: cover. Is there any way to add a percentage value?
I want to add an Event Hover that slightly increases the size of the image I’m using from the background, but to keep it responsive accurate background-size:cover. follows an excerpt of code made…
-
0
votes1
answer27
viewsHow do Breakpoints with Susy?
I’m having problems to generate the Breakpoints of a project for Celular (320px). When I put the Breakpoints he reads even in Desktops, but be right on Mobile also. @media (min-width: 320px) { /*…
-
0
votes2
answers1762
viewsHow to create a responsive pricing chart?
I need to create a responsive price list, but I don’t know how to start. I don’t know if I use list or table. Below is an example of how it is to stay: Does anyone have any idea?…
-
0
votes0
answers783
viewsHow do I place a rotating banner with images on a responsive website?
I made a rotary banner with jQuery on Dreamweaver for a responsive website. When viewed on the Desktop it looks perfect, but when I switch to mobile or tablet the photos stay distorted. How do I get…
-
0
votes3
answers2658
viewsDiv responsive with image and other elements inside
I’m creating a website mobile with design responsive. Within a div have a slideshow which shows 300x300 images, I need to make this slideshow responsive without touching the attributes width and…
-
0
votes1
answer115
viewsBrowser only responsive HTML page
I created a responsive html page, to run mainly on smartphones. However, on portable devices, in vertical position (standing), the background image does not "resize". Already in the browser, if I…
-
0
votes1
answer191
viewsDropdown-Nav remove the "Hover" and appear complete listing of menus
Good staff, I’m having another difficulty that I can’t solve, my dropdown menu works with Hover, but when you get the toogle I’d like the x submenus to appear with the Hover to be like a listing,…
-
0
votes1
answer60
viewsCSS and JS do not render on mobile devices
My Rels links don’t open on mobile devices like js css and images someone knows what might be going on? <link rel="stylesheet" href="<?php echo BASE_CSS_SITE; ?>/bootstrap.min.css"/>…
-
0
votes2
answers129
viewsResponsive Design
I have two questions here with responsive design. The first is in relation to the code that follows: <link rel="stylesheet" media="only screen and(min=width: 1366px)" href="css/deskmax.css" />…
-
0
votes0
answers212
viewsLoad php file according to screen resolution
Hello, I know there are frameworks like bootstrap (which I use) but I really want to make a separate template for mobile devices. My doubt is how to call the php file according to screen resolution?…
-
0
votes1
answer54
viewsdropdpwn menu does not work on touch
I’m in the following trouble I made this website but by accessing it on mobile and clicking on the menu it expands to a dropown on the tab what we offer and when I click on a link it does not work…
-
0
votes2
answers61
viewsAdapt css to viewport
How do I adapt my website to the size of ViewPort? I have a good resolution image and I would like it to adapt to the screen size, without the scrollbar.
-
0
votes1
answer111
viewsMedia querie is ignoring attributes
I’m trying to get a DIV only be shown on small screens, then set the following: @media screen and (max-width: 460px) { #bloco{ display: block; width: 100%; height: 50px; background-color:…