My wordpress blog (workmoneyfun.com) is on Genesis Framework Prose Theme which is fully mobile responsive. However, I increased the width of website content area which has resulted in non-optimized for mobile. I had added the following codes to increase width.
body {
background: #f5f5f5;
margin: 0 auto;
width: 1080px;
}
#inner {
width: 1070px;
padding: 0 10px;
}
.content-sidebar #content-sidebar-wrap {
width: 1040px;
}
.content-sidebar #content {
width: 680px;
}
.sidebar {
width: 320px;
}
.full-width-content #content {
width: 1000px;
}
.footer-widgets-1, .footer-widgets-3 {
width: 330px;
}
.footer-widgets-2 {
width: 280px;
}
How do I make my site mobile optimized with the current increased width area? Please suggest. Thanks.
I suggest to use % instead of px, use media query for the responsive.
Related
Okay so ill explain this as best i can.
I have a booking page widget on my website from simplybooking.
It works great on desktop but does not scale on mobile
This is the page in question : https://www.meetaroundthecampfire.com/bookings-checkout/
So this is the code ive tried to use in the page, to make it responsive
<div class="embed-container"><script src='//simplybook.me/v2/widget/widget.js'></script> <script>var widget = new SimplybookWidget({'widget_type':'iframe','url':'https:\/\/meetaroundthecampfire.simplybook.me','theme':'concise','theme_settings':{'timeline_show_end_time':'0','light_font_color':'#ffffff','sb_base_color':'#5a3afd','booking_nav_bg_color':'#ffffff','dark_font_color':'#333333','hide_img_mode':'0','sb_busy':'#dad2ce','sb_available':'#d3e0f1'},'timeline':'modern','datepicker':'top_calendar','is_rtl':false,'app_config':{'predefined':[]}});</script></div>
With the following css in the stylesheet
.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }
But it still doesnt come up right?
Any ideas or help from you legends? because im confused!
Cheers
Ez
You have width 1800px at:
#main2 {
margin: 0 auto 30px;
width: 1800px;
}
You should edit this with media queries. Put it by default with 100%, and then with queries change it correspondingly. Example:
//default
#main2 {
margin: 0 auto 30px;
width: 100%;
}
For devices > 768px:
#media (min-width: 768px){
#main2 {
width: 750px;
}
}
etc. etc...
I would like to make the main menu full width in below website. It is in wordpress. I am not sure which element to edit in custom css. Thanks.
Main menu image:
Do this:
.top_nav .container {
max-width: unset;
width: 100%;
padding: 0;
}
Unsetting the max-width of that container will mean that if you choose to enlarge the whole page content width, the header will always be full-width without you having to apply a new max-width to match the updated content.
Add below css and check
.top_nav .container {
width: 100%;
padding: 0;
max-width: 1230px;
}
Update the css like
.container { margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px; }
body.header_style_transparent .top_nav {
position: absolute;
left: 0;
bottom: 0;
width: 1230px;
background: #c42953; }
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
I'm using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
Any idea what is causing this? It's not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I'm using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I'm using?
#media screen and (max-width: 700px) {
/* basics */
#content,
#sidebar,
.endbar_left,
.endbar_right {
float: none;
width: 100%;
}
#content {
margin-left: 0%;
padding-left: 0%;
padding-top: 20px;
}
html,
body {
width: auto !important;
overflow-x: hidden !important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
#header {
padding-bottom: 0 !important;
}
/* posts */
.inside2 {
padding: 0 10px 10px 10px;
}
.post {
padding-right: 3px;
}
.pics_article {
float: none;
margin-left: 0;
}
}
Thank you in advance for your help. FYI, I'm not a web developer. Someone with okay html/css knowledge. Thanks!
Just found the solution by myself! It was !important; in my img properties (not in the above-posted #media query, but in the main part of CSS) causing this distortion. Removing !important; from the below has resolved the issue.
img {
border: none;
max-width: 100% !important;
height: auto;}
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/