Div responsive with image and other elements within

Question

Div responsive with image and other elements within

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I'm creating a site mobile with responsive design.

Within a div I have a slideshow that shows 300x300 images, I need to make that slideshow responsive without touching the width and height fault attributes of it. The code is something like this:

<div id="div-de-fora">
    <div id="div-do-slideshow">
        [elementos do slideshow]
    </div>
</div>


//css
#div-do-slideshow{
    width:300px;
}

#div-de-fora{
    ?????
}

Stirring in width of #div-do-slidshow is not possible since it uses the left attribute to swap images.

You can change the slideshow display using only CSS, parameters, etc. No #div-de-fora ?

I've tried using iframe and FlexBox but I was not successful.

In this project I'm not using jQuery, the solution should use only HTML, CSS and pure JavaScript.

html css div layout-responsivo

asked by anonymous 20.11.2014 / 03:54

3 answers

How to receive an array and print its contents using PHP? Start DatePicker with current day

score 1 · Answer 1

Hello. You may get what you want by reversing the "priority" order. To make slideshow responsive I recommend not leaving it with exact values (like 300px). I would do something like this (if I understood correctly ...)

HTML:

<div id="div-de-fora">
    <div id="div-do-slideshow">
       <div class="slideshow-wrapper">
           [elementos do slideshow]
       </div>
    </div>
</div>

It's always good to keep the element handling the slideshow as free as possible from CSS and Javascript interferences. In this case, I would use .slideshow-wrapper to run the slide, and the #div-do-slideshow div to receive responsiveness.

In CSS, I would do this:

#div-de-fora {
  width: 100%; /* ou 300px */
  height: 300px;
}

#div-do-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
}

#div-do-slideshow .slideshow-wrapper {
  width: 100%;
  height: 100%;
}

#div-do-slideshow .slideshow-wrapper img {
  width: 100%;
  height: auto;
  /* redimensiona imagens automaticamente */
}

In this way, you manipulate with exact values only the #div-de-fora , and can even pass values of width / height by Javascript. The rest within her will follow freely.

It would be interesting for you to show your slider code.

score 1 · Answer 2

Put this line below inside the <head> tag of your html

If you want your site responsive, that sums it up.

It might work, but if it does not go the way you want, you can change the CSS to stop % instead of px

      <meta name="viewport" content="width=device-width, initial-scale=1">

score 1 · Answer 3

When it comes to Responsive Layout , it's worth to treat basically :

Viewport :

The viewport is the area where your website appears. It is the white area of the window when you open the browser. The viewport will always be the size of the window. But how the elements are rendered will depend a lot on the device.

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

CSS - box-sizing :

When you set box-sizing: border-box; to an element, the values of padding and border are not added in their width.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

CSS - max-width :

max-width will limit the size of the element based on the parent element .

* { max-width: 100%; }

In the case of Responsive Layout , we do not want anything to exceed the screen size, right?!

Now just apply all this to your project and " voala "!