Div responsive with image and other elements inside

Asked

Viewed 2,658 times

0

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 height of it. The code is more or less 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{
    ?????
}

Mess with the width of #div-do-slidshow is not possible, since it uses the attribute left to exchange images.

It is possible to change the display of slideshow using only CSS, parameters, etc. No #div-de-fora?

I’ve tried to use iframe and Flexbox but did not succeed.

In this project I am not using jQuery, the solution should use only pure HTML, CSS and Javascript.

html css div responsive-layout

3 answers

1

Hello. You can get what you want by reversing the "priority" order. To make the slideshow responsive I recommend not leaving it with exact values (like 300px). I would do something more or less 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 that handles the slideshow as free as possible from CSS and Javascript interference. In this case, I would use the .slideshow-wrapper to run the slide, and the div #div-do-slideshow to receive the responsiveness.

In CSS, I would do like 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 */
}

This way, you manipulate with exact values only to #div-de-fora, can even pass values of width/height by Javascript. The rest of it will follow freely.

It would be interesting if you show your slider code.

1

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

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

maybe it works, but if it doesn’t stay the way you want it to, you can change the CSS to stop % instead of px

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

  • Besides the viewport, it is good to put a CSS element like this: * { max-width: 100%; } that will ensure that none element exceeds parent element size.

  • viewport is a hand in glove kkk, but really has to change the px for %

1

When it comes to Responsive layout, is worth treating basically the following:

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 heavily 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 define box-sizing: border-box; in an element, the values of the padding and of 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 parent element.

* { max-width: 100%; }

In the case of Responsive layout, we don’t want anything to exceed the screen size, right?!

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

Browser other questions tagged html css div responsive-layout

You are not signed in. Login or sign up in order to post.