Responsive Web
969
Solutions
1K
Contributors
Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.
Having this markup:
<label id="cbx-label">
<select>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
</select>
</label>
#cbx-label::after{
vertical-align: middle;
background-color: #eee;
color: #000;
content:url(../sat_images/select2.png);
display: inline-block;
height: 18px;
margin-left: -55px;
pointer-events: none;
width: 17px;
}
But in the iPhone and the iPad of my client it looks bad:
Hope someone have experience of something similar and can give me a quick fix. Unfortunately, I don't own nor iPhone nor iPad, so it's really difficult to find a fix :-)
Thank you
I have the following html :
<div id="buttons">
<button id="submit" disabled>Create Note</button>
<button id="cancel">Cancel</button>
</div>
currently the styling on them is :
#buttons {
margin-top: 18px;
overflow: hidden;
}
#buttons :first-child {
float: right;
}
#buttons :nth-child(2) {
margin-right: 15px;
float: right;
padding: 10px 25px;
}
button {
background: rgba(10, 190, 81, 1);
padding: 10px 25px;
border: none;
color: #fff;
cursor: pointer;
border-radius: 4px;
outline: none;
}
And they appear like :
The above is on chrome windowBut for rendering them in a mobile i want the buttons to appear like :
I was able to place them in the middle by overriding the the following rules (using the below ones):
#buttons :first-child {
float: none;
}
#buttons :nth-child(2) {
float: none
}
#buttons {
text-align: center;
}
But as you see in the mobile screen shot.... The buttons will be having a fixed pixels distance on left and right side in the screen shot it is 35px and then the buttons are placed with note button 1.5 times larger than the cancel button
How do i make them look like the mobile ones ?
So basically i have to keep fixed 35 px off the left and right side and the rest of the space gets filled with buttons one 1.5 times larger than the other....
Thanks
Click on the little "speaker" icon to the right of any of the exercises. If you're on your desktop, you'll get a little pop up window and the video starts playing. If you're on your phone however, you get this:
Mind you, it's the exact same code, but when you're on your mobile device, the pop up window thing doesn't work the way I want it to. Ideally, I want the user to click on that icon and get this:
This is what you see AFTER you click on the play button.
I want the user to click on the icon and be routed to the screen that shows / plays what I've got above, as far as a full screen, automatically playing video clip.
How?
Responsive Web
969
Solutions
1K
Contributors
Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.
