We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
Related
I'm so confused, take this example
I had a page on WordPress that I wanted to turn to kinda landing page.
I hid the
Nav Bar and the header
I used this code
.page-id-58 .image-bg-header,
.page-id-58 .hero-container {
display: none;
}
It worked perfectly
I also selected full width while editing that page on the editor
I had to use the same color to make that page look like a landing page, so I used that code
.page-id-58 #content article {
background-color: #000000 }
.page-id-58 #content {
background-color: #000000 }
Here's the issue...
It is NOT full width, not as I wanted to be, there's still a lot of space in the left and the right side
As you can see here https://i.stack.imgur.com/07AEt.png
What am I missing, please?
Website preview
Your theme is using Bootstrap 3 and so the maximum width is 1170. If you want to change this to 100%, add this to your theme's 'style.css'.
#media (min-width: 1200px) {
.container { width: 100% !important; }
}
Also your image dimension is low - try adding big image and check.
Check the screenshot below for the image dimension change.
If you want to set full width of your image then you should be use this css
Hope this help
Let me know further clarification
.page-id-58 img.alignnone.wp-image-65 {
width: 100%;
height: 100%;
}
I am trying to get a horizontal menu to be fixed in its current position so it doesn't move when you scroll in both regular view and also responsive view.
I tried researching how to do it but couldnt seem to have luck in making it work.
This is on a Wordpress site,
This Wordpress Site
There are a few styles with !important that are holding you back. Namely position: relative !important; and width: auto !important;
Try adding (or separating out) these styles to this class:
.responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Ideally just on the nav not .art-nav-inner i don't know what that is affecting
Go into your 'style.css' sheet (there are several ways to get to it) and add this to the bottom:
.art-nav, .responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Few things this does:
1. Fixes your menu in place on scroll.
2. Extends your menu to full width of the screen (just looks a little better.)
3. Does this all screen sizes (desktop, tablet, and mobile.)
Hope that works for you.
I have an instagram plugin installed, which i have put in the footer of my blog. on a desktop version, it is perfectly fine, however, on a mobile version, the screen is smaller and all the images align under each other, instead of 6 images next to each other as on desktop.
I would like to know, how can I make them 2 rows with 3 images on a mobile? where the 3 images together of each row take in 100% of the screen from left to right? with css?
I can't give you the full style css of the instagram plugin because it has a built-in css. But I can copy certain css element from the inspect element and put !important behind it. I just don't know how to do that.
you can see it here --> http://oihanevalbuenaredondo.be
EDIT
#media screen and (max-width:720px) {
#sb_instagram .sbi_col6 {
data-cols:3!important;
}
}
this is what i have now, it fixes that i got 3 images on each row, but the images arent square, and my images are cut, not resised
You would need to use a CSS #media query to target mobile, and add the following CSS:
#media (max-width: 640px) {
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
#sb_instagram.sbi_col_6 #sbi_images .sbi_item {
width: 33.33% !important;
}
#sb_instagram .sbi_photo img {
width: 100% !important;
display: inline-block !important;
}
#sb_instagram .sbi_photo {
height: 33vw !important;
overflow: hidden;
background: none !important;
}
}
Obviously you may or may not need to end up using !important for everything. Adding the above CSS results in the following:
Obviously I've swapped out your personal photos for placeholders, but the rest is your code.
I am using fixed layouts however when I see my layout in
android tablets and phones the layout is breaking for some
reason.
Please visit http://www.iamvishal.com/pureecn/
and notice the top navigation "open account, customer support and select language"
In the desktop it looks fine however the top navigation breaks in mobile browsers.
I am suspecting its the margin them.
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 65px;
position: relative;
}
Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid".
For example:
div.section {
margin-left: auto;
margin-right: auto;
width: 960px; /*fixed*/
position: relative;
}
#main_links_container {
float: left;
width: 80%; /*fluid*/
}
Also note that when no width is set for an element, the default is auto.
Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.
If you really want to avoid media selectors you could try changing this-
html, body, #page {
height: 100%;
}
To something like this-
html, body, #page {
width: 1200px;
margin: 0 auto;
}
Use a media query in your CSS for greater control on mobile devices-
#media screen and (max-width: 767px) {
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 15px; // reduced amount for mobile devices and tablets
position: relative;
}
}
Ensure this is BELOW the current CSS otherwise it will get overridden
There are a lot of reasons your site could be off in mobile/tablet.
1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.
Can you explain a little better what is breaking?
You assumed wrong. YOu need responsive layout and not fixed!
I suggest you take a look at zurb foundation v4.
Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.
Try this in your css file:
#professional_solutions_list {
max-width: 180px;
width: 100%;
}
see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):
Update
The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:
And this one after adding max-width: 180px, the problem is solved:
I edit the css rules live, using FireBug
EDIT:
Upon your comment, I've checked the website again, please remove:
width: 94%;
from the div with the id: secondary_links
Although a responsive layout like zurb would be advisable - the quick fix lies in applying a
min-width: to your page-wrapper element
I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.