I am having issues with my carousel using bootstrap3. The image itself is responsive, but I'm having a hard time figuring out how to make the caption, and button also responsive. Haven't had much luck finding a clear answer. See
http://windstarwd.com/testman/
View the above page, then make your browser narrow and you will see the issues
for the "page header" (above the nav bar) i was able to get the phone number (h2) responsive by adding:
#media (max-width: 767px) {
.my-header > div > h2 {
font-size: smaller;
}
}
But I am having trouble with the social media icons stacking and throwing off the site, and the carousel caption and buttons getting shoved off the top when in mobile. It would be ideal to have the 32x32 social icons show normally, but the 16x16 when < 768px
So I guess I'm having two issues here :(
You could use the same media query for the top buttons, like
#media (max-width: 767px) {
.socialIcons > img {
width: 16px;
height: 16px;
}
}
or use a second second icon bar that will be shown if the screen size is too small, hiding the big icons bar, with the bootstrap attribute .visible-sm and .hidden-sm (bootstrap doc).
For the carousel caption, you can once again use the media queries to set a different width when screen size < 768px, or define a width with percents instead of fixed size.
Hope I helped you.
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
I'm using wordpress and I used CSS to make the width of my 'About' and 'Contact' page more centered and smaller by adding padding. However, when I do this, in the mobile view especially (I think tablet is okay), there is white space on both sides because of it.
The theme that I am using is built like that I think and I could not really find something in that theme that makes the elements appear smaller width and centered on the page so I used padding instead to make it appear the way that I want.
'Contact' page of my site in mobile view
'Portfolio' page of my site in mobile view
Here's a link to my website: http://www.lisaweng.com/contact/
Is there a CSS that makes those pages appear normal or full width when viewing on mobile view even if I add padding, like how the portfolio page views full width on mobile even though it has white space on both sides of the screen when viewed on the desktop version?
P.S. for the CSS for the padding of the 'About' and 'Contact' page elements, I did use percentages rather than pixels. I am not sure why it's not entirely responsive when viewed in mobile view.
Here's what my CSS looks like for the 'About' and 'Contact' page:
.cf7_custom_style_1 {
padding-left: 20%;
padding-right: 20%;
}
and
.aboutme {
padding-left: 14%;
padding-right: 14%;
}
Is there a code to fix this? Or any idea why this is the case? If there is a code for the mobile view fix, is it going to be the same for tablet as well or does the tablet also have a CSS to fix the responsiveness to how it should be?
Using #media queries to add breakpoints in CSS.
You need to utilise media queries within your CSS code to add specific breakpoints.
Adding this to your stylesheet may help:
#media only screen and (max-width: 950px) {
.cf7_custom_style_1 {
padding-left: 10%;
padding-right: 10%;
}
}
#media only screen and (max-width: 600px) {
.cf7_custom_style_1 {
padding-left: 0;
padding-right: 0;
}
}
Using the above code adds break-points at 950px and 600px. Meaning that if the window size = 950px, change this CSS class to these properties.
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
I designed a responsive web page for tutorial and I have a trouble with unnecessary padding.
http://zinzinzibidi.com/res
In this page when you decrease the your browser window resolution, you will see the horizontal scroll bar (overflow-x) in some resolutions. I am trying to understand but I can't fix this trouble for a few days.
Here is an example picture of my trouble:
My CSS codes here: http://zinzinzibidi.com/Areas/res/Content/css/style.css
My media screen codes are
What am I doing wrong?
It appears that an inner item is causing the issue. Remove the padding from #header-main-buffer and it should go away.
line 515 of your file:
#header-main-buffer {
width: 300px;
padding: 0 10px; <- this is your problem. remove it and it will be fixed
...
I checked your code and it might be your <div id="header-logo"> the one creating that extra padding.
Since the img has a fixed width of 300px on screens smaller than tit will create an extra padding to the right so it fits the screen.
Try reducing the
#media screen and (max-width: 479px) and (min-width: 320px) {
#header-container {
width:;
}
}
EDIT
Basically check all the img that you're using so you make sure their width is appropriate and they fit the screen.
I would like to disable sticky navigation bar on mobile(below 23cm).
My navigation bar is sticky already on all devices. Even in mobile devices(like iphone,ipad). It looks bad so I want to disable sticky nav bar only on mobile. Help me please:)
You can check my site. My site is here. Thank you.
If this isn't an option on your theme, you can add this CSS within a media query:
#media (max-width: 600px) {
#masthead .top-strip { position:relative; }
}
You might need to add the "!important" after the "relative" if that doesn't work. And, of course, simply change the max-width to the max size of the screen where you DON'T want the nav bar to float.
Then you'll get some extra space in between the logo and the navigation bar (since we just put the navigation bar back into the flow of the page). To fix that, you'll need to find this in your CSS and put it within an #media query only for screens that are larger than the mobile:
#media (min-width: 601px) {
#masthead #branding { margin: 90px auto 10px !important; }
}
If you want to test out sizes, I use http://www.responsinator.com/.