I am trying to develop a website using bootstrap framework. I've successfully made a responsive carousel, which works fine. But when I change the size of browser to mobile screen the caption covers the image or covers most of the part of image. Although I'm beginner in CSS for mobile devices.Can anyone tell me how to reduce the size of caption text on mobile or tablet devices. Any help regarding this would be appreciated. I can't put the whole code here because it is quite big. So I'm posting the link to my website.
Here is the link to my site: link
You should read up on Media Queries. With Media Queries you can set specific styles for different window sizes and also for specific devices.
Let's say that you want to change the font-size of a CSS-rule when the width of the window is bigger than 320px and smaller than 400px. Then you can use a code snippet like this:
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
.yourclass{font-size: 14px;}
}
Related
I have a slider that shows the copy I've written along with a button which I would like to show up on the mobile version of the site. For some reason, the slider content does not adapt to the screen when I look at it on my phone.
The website is the following: www.luckywebsites.ca
Any tips on how to resize the slider for Mobile? If not, how can I make a separate site for the mobile only?
The issue is with the size of the text font, check the font size and decrease it in mobile. Please check the screenshot taken after changing the font size. Modifying the code in main.min.css may do the work.
#media (max-width: 767px)
.btx-layout-responsive .font-style-big {
font-size: 28px!important;
}
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 apologize if I sound vague/ abrupt.
The web page should be in tune with the browser size. I mean if the browser size is reduced/ shrunk, the full web page should also shrink and should be visible in the shrunk browser window. Is this possible ?
You will need to use media queries for a responsive layout in your css
Example:
#media screen and (max-width: 699px) and (min-width: 300px) {
<css template for 300 to 699 px width goes here>}
You can also use bootstrap (a responsive framework which has predefined classes for what you may need) for a faster implementation.
i want prevent show my website in small screens same as mobile or tablet...
and i want to show message in this screen that open my site in large screen
How can I do this?
Set width and height using media queries like this
#media screen and (max-width:360px) and (max-height:520px){
body{
display:none
}
}
pen is here with resizable window
Use media queries:
//the css inside this block will only be applied to devices with less than 800px width
#media (max-width: 800px) {
//add css here to show the message to open the webpage on a device with a larger screen
}
You can learn more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
As you have tagged wordpress: You can add custom css where you can configure your themes.
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.