On my site, the logo is up to search block when I try to view the site from tablets and phones, but from a PC it is OK. I included a photo to show you what I mean. Can anyone help me fix this?
As look from tablets and phones:
This is happening because your image width and height are predefined. This means that no matter what device you're on, the image will keep to the defined width/height.
You will need to make your image responsive.
You can do this by wrapping the image in a div that's got a defined width/height (perhaps a bootstrap grid column) and then apply Bootstrap's `.img-responsive' class on your image.
I'd provide a code example once you post your code & the position of where the image needs to be. (see comments on your main thread)
Try add .img-responsive class to the tag in your theme files.
Related
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
This site I've built at http://www.bridetobe.co.uk/ is doing something odd when I try and view it on a mobile device. I'm using some media queries to make it responsive and what happens when I view on a mobile #sitehead seems to be covering up most of #homepage_slider below(see image below).
From looking at the CSS on #homepage_slider I don't see any absolute positioning making it be in a particular place in this instance.
Does anyone know how I can make #homepage_slider position itself below #sitehead rather than behind it?
Thanks
#sitehead is position fixed so you either need padding at the top of the body (matching the height of your header) to push you slider down or not have your header fixed (make it relative). It works on the desktop as your sitehead is relative.
I am having some issues getting my header images to flow correctly. This is a responsive WP theme.
Here is the design I am trying to achieve. (I am not worried about the social icons right now): http://screencast.com/t/0xJuqKuteU
First, I need the message bar with the redish background to flow under the logo and beyond the banner like this: http://screencast.com/t/CZ4DkbRA50R
Then for both the banner and the message bar, I need them to work better when the screen is shrunk down to phone size. This his how I need it to look on a phone: http://screencast.com/t/z5BQ7zB4
Notice the banner comes in right below the navigation and the message bar goes away.
Here is the site I am working on: http://dev.frugalreality.com
Thanks for your help!!
Having a screen CSS and Media/Phone CSS page should help in managing the two different screens.
To make the message bar "float" underneath the logo, you need to set the containing div css (#header-callout) to have position:relative; and set the z-index to something negative (z-index: -1 should do). This creates a layering in the divs and puts the message bar below all other divs (unless you set something else to a lower z-index).
For displaying things differently on the iPhone screen size I would suggest using a media-query. If you don't know how to use those, I suggest browsing through this article to get a better idea of what I mean: http://css-tricks.com/css-media-queries/
In order to NOT display the message bar, you will have to put display:none for the #header-callout in the css of the appropriate media-query.