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;
}
Related
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've created my first sexy menu using CSS and HTML, but how can I make it automatically re-scale in size depending on the screen size. When viewing the webpage on and iPad the menu goes off the page?
http://ahdecor8.co.uk/menu/
You can specify diffent CSS style options for different screen sizes, please check the url below to see how to do this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have a responsive site. in my site I dont use anything css framework.
in desktop view when resize browser to mobile and table ,work very well,but after maximum window to desktop view it is'nt show menu,its hide?
how can I fix it?
you can force the menu to show up by adding important next to the css value, it's something like this:
#media screen and (min-width:990px){
.menu{ display: block!important }
}
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;}
}
I have this layout:
for a desktop/landscape site. And I want it to scale well on a mobile device BUT at the same time I don't want the site to look like crap so I want to change the content slightly so it more closely fits in with the size of a mobile device/smartphone sized screen.
So I came up with this:
In the landscape picture, the 5 boxes in the middle are divs, and each div contains a Picture and a Title (that links to another page). These 5 boxes are the main navigation.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
We can't use JavaScript for this site, so I am wondering how I would make such dramatic changes to this layout using media queries.
I know I can just include the massiv pic even on the landscape view but only choose to display it on the mobile version, but I don't want to download unnecessarily.
Is there a way to solve this?
Ok, this should give you the idea:
<div id="massive-pic"></div>
#media all and (min-width: 601px) {
#massive-pic {
display:none;
}
}
#media all and (max-width: 600px) {
#massive-pic {
background-image:url('images/massive-pic-mobile.png');
width:100%;
height:600px;
}
}
You can't insert the images in the HTML directly, otherwise the image will be downloaded allways! Even if you set it to display:none.
So you need to insert the images with css as a background image.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
That's not possible with server side scripting alone, because info like device width won't get send to the server.
However you can try to detect mobile and other devices accessing the user-agent and other header information.
If you use PHP, you could use something like that:
https://github.com/serbanghita/Mobile-Detect/