Hey Guys so i have been programming for a month now and i am working on a Webpage
So basically there is a Video starting at the very Top of the Webpage and underneath there is a Caption.
In the Webbrowser everything is fine and fits.
But if you look at the Page from different Devices with different Screen Sizes the Text beneath the Caption tends to leap upward into the Video.
Is there a way to make the Video as an Object which doesnt allow Texts or other onejcts to leap into it? i Mean there has to be a Way to make Borders between those 2 Objects which work on all Screen Resolutions.
Greetings Mattia
Tell me if you need a Screenshot or a Code
You must to create css adapting to another screen size (smartphone, tablet ...) this is done using media queries for example:
#myDiv {
margin-top: 20px;
}
#media screen and (max-width: 992px) {
#myDiv {
margin-top: 150px;
}
}
The part: (max-width: 992px) is used to define from which screen size the applicable rule.
Related
I'm working on a simple webpage where the artwork of an album has the tracklist beside it, the problem is that it's not very responsive and doesn't really work on mobile. The desktop version is fine, what i have in mind tho, is that on mobile, the artwork would have the tracklist under it.
help would be much appreciated.
You can use #media rule to include a block of CSS properties only if a certain condition is true. For example, if the browser window is 600px or smaller, the background color will be lightblue:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Here is a documentation
I am looking for help in regards to a new website that I have built. I have been building Joomla sites for the last 6 months but this is my first site that I am trying to make responsive based on the media queries that I have added.
The site that I have built can be found at the following:
[http://s116169771.websitehome.co.uk/blingphones_j3/]
I have built media queries for the following sizes:
768px,
600px,
568px,
480px,
400px,
320px
What I have noticed is that I still have issues with some sizes, for example when I view the site on my Samsung S6 the max size for this screen is 640px, so this was causing me issues with a 'box' image that had used which was a png.
I have since changed this into an svg file so that it resizes in accordance to the screen size that I am on. The following is my CSS:
#media (max-width: 767px) and (min-width: 601px) {
#mainbox {
float: left;
position: relative;
background: url(../images/box.svg) no-repeat;
background-size:contain;
margin-bottom: 40px;
}
I have also made sure that the text within the boxes has a width of 100% so this resizes with the box.
The problem I now have is rather than adding more breakpoints, I need to ensure the heading on the page 'WE FIX BROKEN, DAMAGED MOBILE PHONES' resizes like how the box and the text within the box does.
Unfortunately when I am resizing the screen from 767px to 601px I notice a gap appearing under the mobile phone image and I am not sure how to fix this to be honest.
I have looked through the Firefox Developer Tools but just cant figure this out. I also have the font sizes as em and thought this would work in the same way as the svg but this isn't the case.
My current site has been built using the latest version of Joomla 3.8.4.
Would really appreciate some advice on where I am going wrong and what I need to consider to ensure when resizing the page is displayed correctly without adding any more breakpoints.
Sheraz, just to confirm the template already has the bootstrap framework as part of its build. The following is the code in my index.php file.
JHtml::_('bootstrap.framework');
I have read you question and i think the easy and best way of making a website responsive is through bootstrap. In bootstrap there are pre-defined classes you can use to make that thing responsive
For example: To make a image responsive use img-responsive class so it will resize itself according to the screen.
<img src="source" class="img-responsive" width=100% height=500px/>
Except this bootstrap contains grid system you can align them easily.
I hope this will help you
One thing that I notice with your media query styling of text inside the .boxestext1 div is that at narrow viewports, the text is too wide for the actual space, and it overflows the box.
One suggestion is that if you replace your current CSS
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0 32px 0 32px;
width: 373px;
...
}
}
with something like the following, it will scale better at smaller viewports.
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0;
width: 100%;
...
}
}
If you want good results on mobile you can never be too careful about hardcoding widths and other units.
Good luck!
I am creating a webpage using only CSS & HTML
Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.
How do I fix this ?
Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.
The solution:
Media queries:
With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.
#media (max-width: 979px) {
.h2 {
font-size: 10px;
}
}
This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the #media rule has.
Media queries w3cschools
tip:
You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)
If you have any future questions please let me know I will explain some more about media queries.
I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
Check out this page:
http://new.brixwork.com/realtors/real-estate-website-features
Below the big computer screen, the images and text blocks alternate in a staircase design.. on one div the image is on the right, on another, on the left. And there are 4 blocks.
I'm using the Skeleton framework (www.getskeleton.com) for a responsive grid design, so the grid re-sizes on the viewport queries, which is great. however this poses a problem on iphones or vertical view on iPads when the image & text boxes shuffle to get on top of each other.
Instead of
image text
text image
image text
text image
I get
image
text
text
image
image
text
text
image
Because of the order by which the objects were typed out in my HTML.
So the question is, is there a clever way to re-position items via CSS? I already use media queries like this:
#media only screen and (max-width: 959px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
}
Any ideas? I want to do this without resorting to jQuery to detect the window size and re-size them if I can avoid it. I can't use PHP to alter the DIV orders on "echo", because I want the re-shuffling to be done effectively if a tablet is taken from horizontal to a vertical position.
Where there's a will, there's a way! The big drawback with using a framework that uses semantics like "six columns alpha" and "ten columns omega" is that they create an expectation for visual ordering. The six columns are on the left, the ten columns are on the right, and the alpha/omega naming conventions affect margins because the order is right in the markup. You have stumbled across an unexpected use case for the author, I'm thinking.
(Incidentally, your ten column area also contains images that are overflowing their containers; ie. they're not being resized)
The straight goods:
My honest advice for future maintainability is to learn from skeleton, take what you want from it understanding what its different classes do... and re-invent it.
For example, what you have on your main page are a series of feature containers. The markup should look consistent, like this:
<div class="featurebox">
<div class="media">Image, slider, or other visual interest items here</div>
<div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
<div class="media">A different image, slider, etc</div>
<div class="items">More text of items of interest</div>
</div>
And then you can style these to create the left-right effect. The key here is in the selectors. By floating right instead of left for divs inside every other featurebox, our effect is easily achieved:
.featurebox { width: 600px; overflow: hidden; clear: both;}
.featurebox div { float: left; }
.featurebox:nth-of-type(odd) div { float: right; }
.items { width: 200px }
.media {background-color: grey; width:400px; height: 100px;}
Fiddle: http://jsfiddle.net/7qRfh/
The problem in modifying what you currently have is that this doesn't really fit skeleton's expectation of left-to-right stacking of floats. If you're willing to say "phooey" you could identify your containers, target every second one, and flip the .columns float orientation. You will also need to override omega and alpha class behaviour so that omega is actually acting like alpha and vice versa. A mess, in my opinion, but it'll work.
The hack
I just had a fiddle around here and I think I closed it. Can't find the URL in my history so I may not have saved it first. :-/
But no matter. It boiled down to this: you can do what you need to do with your current markup, but the changes to CSS are even more extensive and become nutty.
The container already has position: absolute, so you have to unfloat the "six" and "ten" columns, position them absolutely, with "ten" on top and "six" on the bottom. The big issue is that do to it easily, the container as well as the "six" and "ten" all need to have height set on them. Absolute positioning takes an element out of document flow, so without height it just becomes an overlapping weird mess.
Honestly, if you insist on skeleton the way it is, and the markup the way it is, the most reasonable hack actually turns out to be JavaScript. If you already have jQuery on your page, all the easier.