My email is basically two images side-by-side with a cta button underneath. On mobile the email is fine. On desktop the second set of images and button width expands to 100%. The inky code looks fine to me. Am I placing the button in the wrong location. PLEASE HELP
Mobile: https://s3.amazonaws.com/fgqa.club/mobile-email.jpg
Desktop: https://s3.amazonaws.com/fgqa.club/desktop-email.jpg
Related
Alright, I need some help centering this button! I have it working on my desktop but when I adjust the screen size it really gets messed up. Here are some screenshots to give some context. Here is the link to my website, the button is below the main slider "Orion CostPlus Strategy"
In the page developer
Button correctly centered when full screen
Button messed up when I change window size
I appreciate any help!
I want uploaded image with slides option https://docs.reduxframework.com/core/fields/slides/ on redux-framework have same height and not let slider image to cover all front page if screen resolution gets above mobile,tablets resolution.
So far i tried to resize image (also set static height)to see also some content below slider image on desktop resolutions 960px and above (i want to see some content below front page slider image on desktop resolutions above 960px),but not to slider image to cover all front page.But when i resize image to see some content below slider image on desktop resolutions 960px and above,then slider images are almost not seen on mobile devices anymore,when it gets 480px and below. Images height is only ok on mobile devices,when slider image covers all front page,but not ok when i resize them to see some content below slider image.
Example:I have now like on this website http://preview.themeforest.net/item/neer-construction-business-wordpress-theme/full_screen_preview/20851072?ref=cirvitis ,when slider image covers all the front page and page content itself are not seen on front page at all,until i scroll down to it,then image height is ok on mobile devices.
But i want like on this website here: https://codex-themes.com/thegem/meta-splash/ header slider image height is ok on front page when it is resized and i see some content below it and have same results on mobile devices view too.
Now i have good results only when slider image covers all front page,then image are seen ok on mobile devices too. But when i resize front page image,then they are almost not seen on mobile devices.
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.
I'm trying to build a page with a navbar on top and a full screen open layers map underneath. There's also an off page navigation pane that slides in when the hamburger glyph is clicked.
I got the layout how I want it on my laptop screen, but when I checked on my phone, the navbar and fonts are far too small. Am I missing something in bootstrap to make this work? Is it the fault of the openlayers CSS?
Screenshot
Live: http://carpiediem.github.io/quartermaester/
Try this:
You applied body {font-size: 80%;}. Either remove or write class for the menu in media-query.
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.