• 0

Require some assistance from mobile web programmer

Asked by flynempire,

 Share Followers 0

Question

flynempire
Posted

I have been struggling to figure out a way to get an image fit on one side of the screen to the other and perhaps a knowledgeable programmer could give some advice.

We have this mobile site http://m.kleinerts.com/Shop. 

If you look at it on your phone you will see Sweat & Odor Solutions and below a grey banner that transitions into another picture. There are only two picture total in this and below that are two grey rectangles for Free USA Shipping and Click To Call.

They should be centered perfectly on your phone but what the owners want is for the all 3 of these to reach the edges of both sides of the screen. I have tried all types of .css code with no luck. 

Personally I think it looks fine as is but I can understand having it fit to the edges. I would appreciate any input that can be offered. In Chrome I can inspect while using a emulator and there I tried different markup but nothing so far.

 

Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
DevTech
Posted

404 error in desktop Firefox.

 

Changing window size yields odd non-responsive feel so something is wrong with the basic template.

 

You haven't mentioned which mobile device you are targeting and if you are packaging it in a wrapper like Apache Cordova etc.

 

So all I can say is that if it works like crap in a desktop browser, getting mobile working will be just that much harder than it needs to be. Get it smooth on the desk first.

 

Link to post
Share on other sites
  • 0
flynempire
  • Author
Posted

Thanks for replying. This site was created in word press and was only done for mobile in mind not desktop. I can see it fine in iphone and Samsung Galaxy, etc,

Link to post
Share on other sites
  • 0
DevTech
Posted
On 6/29/2016 at 4:34 PM, flynempire said:

Thanks for replying. This site was created in word press and was only done for mobile in mind not desktop. I can see it fine in iphone and Samsung Galaxy, etc,

Well I think that is a backwards overly difficult approach but to each his own.

 

If you start with a responsive template your issue becomes easy to debug on the desktop and if the template is well designed the mobile should just work with very little adjustment. Even if you never deploy the website to a desktop audience, this approach is less work and easier to work with. One of the many reasons everyone has switched to responsive websites in the last few years.

 

Link to post
Share on other sites
This topic is now closed to further replies.
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • How to view mobile version of websites on desktops
      By Namerah S
      How to view mobile version of websites on desktops
      by Namerah Saud Fatmi

      Visiting websites designed primarily for desktop viewing on phones is fairly straightforward thanks to web browsers on Android and iOS. Doing the opposite, however, can be a bit of a challenge. If you'd like to view the mobile version of a site on your desktop for whatever reason, we've got you covered.

      Here's a simple guide to show you how to view mobile versions of sites on desktops. This tutorial will work on Google Chrome and Microsoft Edge.

      Step 1: Open up the website on the desktop browser of your choice. We've chosen Chrome for this guide but Edge will do as well. Once the page has loaded, press F12 to toggle the developer tools.

      Step 2: Once the dev tools have opened up, find and locate the device toggle button that we've highlighted in the image below and click on it.

      Step 3: You can click on 'Responsive' to select the device that you want to simulate. A drop-down menu with several options to choose from will appear. Alternatively, you can also customize the resolution of the simulation to suit your needs.

      You can find sample mobile simulations of the same website on Chrome and Edge for your comparison in the below images.

      Google Chrome Microsoft Edge We hope you found this short guide easy to follow and helpful. If you have any questions or requests, let us know in the comments below!

    • Deutsche Telekom and Ericsson run tests to green sites
      By zikalify
      Deutsche Telekom and Ericsson run tests to green sites
      by Paul Hill



      The mobile solutions provider, Ericsson, has announced that it’s working with Deutsche Telekom to power mobile sites using renewable solar energy. The companies are conducting their tests at a Deutsche Telekom mobile site in Dittenheim, a village about 100 miles north of Munich, in a bid to show that mobile phone sites can be powered using an independent energy supply backed by solar power.

      To power the Dittenheim site, the two firms built small solar modules that took up an area of 12 metres-squared. Ericsson has provided the Ericsson Power System that is being used to manage maximum power point tracking and voltage conversion. Based on testing carried out during the latter half of 2020, the two companies showed that solar energy was capable of powering two-thirds of the energy needs of the site.

      Commenting on the project, Leif Heitzer, Senior Vice President Technology Guidance & Economics at Deutsche Telekom, said:

      Projects such as these will be critical for Deutsche Telekom as it moves forward to meet its carbon obligations under the Paris Agreement which aims to limit global warming to below 2 degrees Celsius. Ericsson also said that it’s a strong supporter of the Sustainable Development Goals which promote, among other things, renewable energy, decent work and economic growth, and innovation and infrastructure - all of which apply to the experiment in Dittenheim.

    • Chrome for Android to get a dedicated button to close all tabs at once
      By Jay Bonggolto
      Chrome for Android to get a dedicated button to close all tabs at once
      by Jay Bonggolto



      The current version of Chrome for Android provides no straightforward way of closing multiple tabs at once. In order to do that, you need to go to the tab page, tap the three-dot menu, and click on the “Close All Tabs” option.

      But a recent commit code suggests that Google may be adding a dedicated shortcut button for that functionality to its mobile web browser for Android. That particular button comes in the form of a trash can icon and it will be situated on the left side of the Chrome Duet interface alongside the "new tab" (+) button and the three-dot menu.

      For the uninitiated, Duet is the new name for Chrome's browser interface on Android, replacing the former Chrome Duplex name. Google made that change in order to avoid confusion with the Duplex feature of Assistant that's not related in any way to Chrome toolbars.

      With the upcoming change, the + button will be placed at the center of the interface and the overflow menu to the rightmost side. It's not immediately clear, though, when this change will become widely available to everyone. But it's expected to arrive soon as part of a future Canary release since the code has already been committed.

      Source and image: Chrome Story

    • Google Lens goes live for image search on mobile web in the U.S.
      By Jay Bonggolto
      Google Lens goes live for image search on mobile web in the U.S.
      by Jay Bonggolto

      Google promised last month that it would roll out Lens to Google Images after announcing the object recognition technology in May of last year. The feature is one of the biggest improvements the Mountain View giant has introduced to its search capabilities, letting you learn more about objects within an image on the web with artificial intelligence.

      Today, the feature is officially available for everyone doing an image search on the mobile web in English. While its availability is currently limited in the U.S., Google plans to release the image recognition capability to more countries and in more languages in the future.

      As Google explained last year, Lens uses its Knowledge Graph to identify items in a given image and show you a selection of similar photos. This is especially helpful if you are looking for a new sofa, for example, as shown in the GIF to the right. With Lens, you can choose one of the images in the search results and the feature will display relevant photos that may contain links to product pages, for example, so that you can purchase the item you want.

      The Lens icon can be found next to the share option underneath an image. Once you tap on it, dots will show up on objects you may want to explore further. After tapping on one of the dots or drawing a portion of the photo containing multiple dots, a Lens panel will start showing related images.

      Google promises to display the dots on other types of objects in the coming months including landmarks, animals, and plants.

    • Responsive layout - any suggestions?
      By +Dick Montage
      I've thrown together a little responsive layout, and wondered if any of the better developers here could take a look, please?  It's not about design, just about "Is it working?  How can it be better?".  It's meant to:
       
      Be centred on wider resolutions
      Navigation take a 2nd line on lower resolutions (<750)
      Navigation become iPhone style on devices
      Sidebar to the right on wider resolutions
      Sidebar below on lower resolutions (<750)
      Sidebar below on devices
       
      http://niklouch.com/
       
      Thanks in advance