Mobile View Problem

Yes it seems you have just added those rules.

@media (max-width: 430px) {
ul#whitening_descrip {
    display: block;
}
#whitening_bar ul#whitening_descrip li {
    border-bottom: 1px solid #ccc;
    display: block;
}
}

I would think that at perhaps 480px would be a better breakpoint for that rule.

I would also use this:

@media screen and (max-width: 480px) {

}

Rather than the shortened version you were using as I have seen some browsers fail with it (especially those that need polyfills with media-queries.js or respond.js).

It works perfectly now, I just want to ask if flex is advisable to use for coding a responsive list item?

Do you mean using flexbox?

You can use it but slightly older browsers will have no support so you have to use it wisely and check that without flexbox the content still displays in some sort of order. Or use something like modernizr and offer different versions depending on support.

I see, But if I want to use a responsive code for my site then I can use flexbox but then I need to create a seperate style for ie compatiblity.

You can see browser support here.

Flex box solves some layout problems but there is no need to use it for everything as it will probably make it harder to maintain in the long run. Just use it when you need that flex behavior. You can create fully responsive sites without ever needing flexbox. Flexbox is just a useful addition to the toolbox.

I don’t use it yet unless its for an effect that can’t be done any other way or if its not important to the structure of the page.

Hi, How can I make this list item mobile view compatible?

I want it to behave like this:

Thanks. :smiley:

Hi, How can I make a list item responsive?

What exactly do you want done with that? Those screenshots look fine.

This what happen when in mobile view:

I want it to something like this:

In your mobile media query, you’ll need to undo the width and float set on “#home_page_products ul li”

Having a problem wit a tiny space at the right side:

Posting since I’m tired of scrolling - http://www.skinwhitening101-intl.com/
You give that yellowish color as a color background to “#home_page_products ul li img”, however those images are only 300px wide and your columns are 303.

I’d move the background:#f9f0d1 to the <p>.

So remove this

#home_page_products ul li img{background:#f9f0d1}

Place it here.

#home_page_products ul li p{background:#f9f0d1}

Thank you so much. sorry for asking. I have read this blog http://webdesignerwall.com/tutorials/css-elastic-videos

This demo is really awesome so I give it a shot. What I did in my http://www.skinwhitening101-intl.com/luxxe-white/ is I code my video like this:

.left_vid {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.left_vid iframe,  
.left_vid object,  
.left_vid embed { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

But it gives me a blank space in my page?

That demo was just to showcase he could get elastic videos by using iframes. Don’t follow that demo. Use the HTML5 video tag. Google examples. But yes remove everything you just did.

Start by removing <div class="wrapper_main layout_box"> (or cancelling its effect in mobile with width:100%) : it reduces the available width on mobile, and full-width is all the rage nowadays anyway. Then make the top background more compatible with the hamburger. Then make adjustments to the desktop view.

hmm, Well that’s a lot of work. But I’ll go ahead and do it carefully though.

Hi, any help why the view is mess when it is in

@media screen and (min-width:768px) and (max-width: 960px)

It shows like this:

I’m not seeing that on http://www.skinwhitening101-intl.com/

Browser?

Hi, I am sorry. I was able to fix the problem, I used the method you are doing. Inspect Element. :smile: Thank you so much!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.