I have the bootstrap full template (https://startbootstrap.com/template-overviews/full/) and I added a modal and a background image. When I resize it on browser it's responsive, when I go from phone on website the image is above the modal and it doesn't cover all the website.
I just edited the /css/full.css file to add the image.
How can i make it responsive on phone too? I accessed it on Chrome on two mobile devices and has the same problem.
Thank you
You can add "img-responsive" class to your img tag ()
So you the code should be like this:
<img src="your-source" class="img-responsive" />
You have the reference here: https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
However provided code would make your question more precise.
Thank you, but I am reffering to background image, which stops above the modal.
My website looks like:
Background image
blank
Modal
blank to the end
Related
I am building a website on Wordpress. I made a 2-column layout for my desktop page in Wordpress, where the image fills one of the column and the text fills the second column. (https://drive.google.com/open?id=1TKhwA_vQnukeh-q1KL5sqXtHYtXVRjDA)
This is how it looks now (https://drive.google.com/open?id=1Rr-iDFylP0Goev2Vb6g9fsgd-lSkJV6x). But I want to show the image full-width (something like this https://drive.google.com/open?id=1CvWrqGogynSTN2qn3myKYUT0ZkzZP8o1) on the mobile device.
How could I do that?
Shi,I agree with Demian, your question is a bit vague, but I will give you a general answer for doing this task with CSS using Media Queries.
In Wordpress you can add the css to your style.css file or in an html block within <style> tags above the <body> tag. Then in your html block or template file give your <div> the correct class. I made this fiddle for you, take a look and let me know if that helps.
I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
I have a responsive site that has an image next to a form. My problem is that when the screen shrinks the image covers the form. I would like it so that the form covers the image. I have tried changing the Z-Index but it doesn't seem to work. You can see examples of my problem here: http://inventivewebdesign.com/uctest/?page_id=45
Thanks in advance for your help!
I looked at it and just used CSS to make the specific div for this specific page to change the width when the screen shrinks, works fine now. Thanks for your ideas.
could you help me with the following case:
I have a youtube video on my website.
<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>
Beneath and above this video I have some form elements like
<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>
The video is in its own div, the buttons and form elements are in their own divs.
The buttons work perfectly on the desktop browsers, however on the mobile browsers those buttons, that are beneath the video are impossible to click (top buttons are working fine) I figured out that if I remove the video from the page, all the buttons start working. The buttons also work for the first few seconds before the video is fully loaded. So, it looks, like the video is invisibly overlapping the area 100-150px beneath it and makes impossible for mobile browser users to click on any element. (ps Ive tried to use z-index of 1000 - no effect)
Please, help.
Thank you for your time.
I'm having the exact same issue with the YouTube iFrame. I've been testing all day. Here is where I'm at:
The problem is the element that is inside the YouTube iFrame.
<video class="video-stream html5-main-video" controls="true"
x-webkit-airplay="allow" data-youtube-id="..............."></video>
If you 'display:none' that, or change it to 'top:0'. It fixes the problem.
However, since it's inside the iFrame, I dont know how to change it.
To add to this discussion attached is a link to a fiddle of the issue here:
http://jsfiddle.net/krismeister/KynXG/5/
//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.