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
Related
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.
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!
How can i show a different logo when my website is viewed on a mobile device?
I know nothing about html for after some research i found that this can be done adding some ccs to my style.ccs.
Im working on Wordpress but i tryed different ways and no one worked for me. If anyone can help me with a code for my web im going to be very grateful :)
My web is camporecoleta.com.ar and i want to show the next logo when the page is loaded on a mobile device: http://camporecoleta.com.ar/wp-content/uploads/2017/12/Logo-1-1.png
I hope anyone can help me, sorry if i had any mistake, my main language is not english
Well there is probably a lot of ways to do it but one easy way would be plain old css with #media that will apply diffrent styling depending on the viewport.
Basicaly you could use a css background image on an element and when the screen gets to a specified size there is another css class with a diffrent image that is apply.
You could also just ajust the size of that same logo.
CSS #media rule
You can solve your issue with media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
or
Try function wp_is_moible()
if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
}
https://codex.wordpress.org/Function_Reference/wp_is_mobile
Try using CSS media queries like this:
#media only screen and (max-device-width : 640px)
{
/* style here apply for screen width up to 640px */
#logo
{
background-image: url('pathToImages/myMobileLogo.jpg');
}
}
#media only screen and (min-device-width : 640px)
{
/* style here apply for screen width above 640px*/
#logo
{
background-image: url('pathToImages/myBiggerImage.jpg');
}
}
I am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
I am really desperate about DIV elements positioning bug when trying to create a template for a new responsive layout web design.
The URL is: http://cs.renault-club.cz/responsive_005_bug.php
The problem: when you resize the window to be less than 800px, the "sidebar_right" (online users) DIV element displays not directly under the "obsah" (content) DIV, but bounced under the "sidebar_left" (menu) DIV element.
Please HELP! I spent already 2 hours trying anything, but without any success :(
In less than 500px it works fine, as well bigger than 800px. The current window width is displaying on the top left corner.
You have a 2 media queries causing it to push down: if you remove this
#media screen and (max-width: 800px)
#obsah {
width: 80%;
}
and also remove this
#media screen and (max-width: 800px)
#sidebar_right {
width: 50%;
}
it will work as you see below:
well, between 500 and 800px #sidebar_right has a with of 50% - that's too much to fit right of the other elements (seems like this is defined inline, in the style tag at the top of that page)
that's not a bug. it is how the box model works. try:
#sidebar_left { float:left; }