• Locked
4 replies [Last post]
Wed, 2014-04-09 01:30
jess888
jess888's picture
Offline
Regular
Last seen: 3 years 10 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

Trying the make the div "mainlike" responsive so that it appears above the fold no matter the screen rez. So it would need to never be taller than the viewable screen.

The mainlike div is the grey box that contains the logo, menu and slideshow. The slideshow itself is already responsive.

Thanks so much; really stressed today!

http://barbarawhiteperry.com/test.html

Top
Tags:
Wed, 2014-04-09 02:25
#1
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well it is possible to make

Well it is possible to make the background make responsive in height as well, but it will make the whole site look strange. Meaning, you need to alter everything that is inside this grey box.

This is the code to make the height responsive as well, find the following code inside: 

.mainlike {
margin-left: auto;
margin-right: auto;
background-color: #999999;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
width: 70%;
padding-right: 40px;
padding-left: 40px;
}

and change it with the following code:

.mainlike {
margin-left: auto;
margin-right: auto;
background-color: #999999;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
width: 70%;
padding-right: 40px;
padding-left: 40px;
height: 0;
padding-bottom: 51%;
}

Check Maximum Webdesign for your online solutions

Top
Wed, 2014-04-09 02:34
#2
jess888
jess888's picture
Offline
Regular
Last seen: 3 years 10 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

helldog2004 wrote: Well it is

helldog2004 wrote:

Well it is possible to make the background make responsive in height as well, but it will make the whole site look strange. Meaning, you need to alter everything that is inside this grey box.

This is the code to make the height responsive as well, find the following code inside: 

.mainlike {
margin-left: auto;
margin-right: auto;
background-color: #999999;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
width: 70%;
padding-right: 40px;
padding-left: 40px;
}

and change it with the following code:

.mainlike {
margin-left: auto;
margin-right: auto;
background-color: #999999;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
width: 70%;
padding-right: 40px;
padding-left: 40px;
height: 0;
padding-bottom: 51%;
}

OK, I tried that, but the contents of the div don't respond when the window gets smaller, just the grey box itself.

Top
Wed, 2014-04-09 03:09
#3
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

That is exactly what I said,

That is exactly what I said, no the contents do not respond with the div.
You need to alter all the content one by one in your css to make the whole div including content responsive.

Check Maximum Webdesign for your online solutions

Top
Wed, 2014-04-09 03:45
#4
jess888
jess888's picture
Offline
Regular
Last seen: 3 years 10 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

OK, thanks. I see what you

OK, thanks. I see what you are saying. Unfortunately, the slideshow is supposed to respond also, but it didn't respond the same as the div. I will work on this.

Thanks again.

Top
  • Locked