Responsive design issue

rajeevnair · January 2017

Hello

I have created the page however when I open the page in iPad the button "hotel booking" and "Book Now" overlaps each other . You can check the same at the page https://booknow.zjcatering.com/

The buttons overlaps when I open the page in ipad potrait mode

Thanks

Rajeev Nair

Albert · January 2017

Hi,

as we can see, the buttons does not look good on iPad because of your custom css:

.hbbtn1 {
    width: 200px !important;
}

rajeevnair · January 2017

Hello

How else could I make the button to be for a fixed size as If I dont put that css, the button take the width of the text size.

Albert · January 2017

You can wrap above css into right @media only screen rule to set above css for desktops only. For more details about @media rules, please visit http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can also find some pre-built rules under responsive.css file.

rajeevnair · January 2017

Could you give an example as the @media query i put for iPad is not working, e.g i out the class for the column element as "bannerbtn" and used the below query, but its not working

@media only screen and (min-width: 768px) {

/* For tablets: */

.bannerbtn {

width:100% !important;

}}

rajeevnair · January 2017

The issue resolved with the media query some alteration as i used max -width . Thanks

Albert · January 2017

Ok, great!

Responsive design issue

Comments